Как сформировать угловую 6 динамически реактивную форму условно

Question

У меня угловая динамическая реактивная форма, и я хочу показать больше полей в зависимости от условия.Пример: на основе выпадающего списка я хочу отобразить еще одно динамическое поле в форме.

  <form *ngIf="formGroup" [formGroup]="formGroup" class="form">
  <div  fxLayout="column" *ngFor="let field of fields;let i=index;" 
         [ngSwitch]="field.type">
   <mat-form-field *ngSwitchCase="'text'">
      <input matInput [placeholder]="field.label" 
  [formControlName]="field.name" [id]="field.name">
      <mat-error>{{field.error}}</mat-error>
    </mat-form-field>

 <mat-form-field *ngSwitchCase="'dropdown'">
  <mat-select placeholder="{{field.label}}" [formControlName]="field.name" 
(selectionChange)="onDropDownChange($event)">
    <mat-option  *ngFor="let item of field.items" [value]="item">
      {{item.fact}}
    </mat-option>
  </mat-select>
  </mat-form-field>
 <button (click)="add(formGroup)">
    ADD
  </button>    

dynamicform.component.ts

 export class dynamicFormComponent implements OnInit {
  formGroup: FormGroup;
   fields;
  ngOnInit() {
 this.formGroup = this.createFormControls();
  this.fields = [{
 {
    name:"categoryname",
    error:"Please Select ",
    label:"Category",
    type: "text", 
    validation: Validators.required

 },{  name:"categoryType",
    error:"Please Select ",
    label:"Category Type",
    type: "dropdown", 
    items: ['cat1','cat2'],
    validation: Validators.required
  }]
 }
 onDropDownChange(event){
   if(event.value  === 'cat1') {
   // logic to add sub category to form
  }
 createControlForm() {
 let fm = {};
 this.fields.forEach((f) => {
 fm[f.name] = new FormControl('', 
  this.validators(f.validation));
 });
 }
  }

Я могу создать свою форму сНазвание категории и тип категории.Теперь у меня есть требование создать еще одну подкатегорию поля на основе выпадающего списка

Answer 1

Угловой API формы предоставляет функцию, называемую отключить свойство, которое исключит управление формой из формы, и мы можем включить управление формой вручную

component.ts

this.form = this.fb.group({
     cName:'',
     cType:'',
     extraOption:{disabled: true, value:""}
   })

this.cType.valueChanges.subscribe((v)=>{
     if(v == 'cat1'){
       this.extraOption = true;
      //Enabling the formControl Using formControl enable() method
       this.form.get('extraOption').enable();
     }
   })

Пример: https://stackblitz.com/edit/angular-ybhrhd