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

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

  <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));
 });
 }
  }

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