Как динамически изменить angular реактивную форму, выбрать параметры раскрывающегося списка

Question

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

Проблема заключается в том, как изменить параметр (и) раскрывающегося списка «Состояние» в стране. изменение нижнего значения.

Эта часть app.component. html

 <mat-sidenav-container class="example-container">       
  <mat-sidenav-content>
    <div class="module-menu"></div>
    <div class="container">
      <dynamic-form [fields]="regConfig" (submit)="submit($event)"> </dynamic-form>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Эта часть app.component.ts

 regConfig: FieldConfig[] = [

    {
      type: "select",
      label: "Country",
      name: "country",
      value: "UK",
      options: ["India", "UAE", "UK", "US"]
    },
    {
      type: "select",
      label: "State",
      name: "state",
      options: []
    }

Эта часть dynamici c -form.component.ts

@Component({
  exportAs: "dynamicForm",
  selector: "dynamic-form",
  template: `       
  <form class="dynamic-form" [formGroup]="form" (submit)="onSubmit($event)" *ngIf="!controlTypeIsTable">
  <ng-container *ngFor="let field of fields;" dynamicField [field]="field" [group]="form">
  </ng-container>
  </form>
  <section *ngIf="controlTypeIsTable">
  <ng-container dynamicTable name="table" [table]="table" >  </ng-container>
  </section>
  `,
  styles: []
})
export class DynamicFormComponent implements OnInit {

  controlTypeIsTable: boolean
  @Input() fields: FieldConfig[] = [];
  @Output() submit: EventEmitter<any> = new EventEmitter<any>();


 ngOnInit() {
    if (field.type === "select") {
      control.valueChanges.subscribe((newValue: any) => {
        this.dropdownChange(newValue,'state')
      });
    }
  }

dropdownChange(value: any, targetControlName) { 
    this.form.get(targetControlName).setValue(value)
    //this.cd.detectChanges();
  }

Эта часть select.component. тс

@Component({
  selector: "app-select",
  template: `<mat-form-field [formGroup]="group">
          <mat-select [placeholder]="field.label" [formControlName]="field.name">
          <mat-option *ngFor="let item of field.options" [value]="item">{{item}}</mat-option>
          </mat-select>
          </mat-form-field>`,
  styles: []
})
export class SelectComponent implements OnInit {
  field: FieldConfig;
  group: FormGroup;
  constructor() {}
  ngOnInit() {}
}

Answer 1

html

<select class="form-control selectState" (change)="selectcontry($event.target.value)" name="contry required>
    <option *ngFor="let contry of regConfig" [value]="contry.options">{{contry.value}}</option>
</select>

<select class="form-control selectState" (change)="selectState($event.target.value)" name="state" required>
     <option *ngFor="let state of contry" [value]="state">{{state}}</option>
</select>

.ts Файл

export class AppComponent {
  // City Names
  contry: any = [];
  regConfig = [
    {
      type: "select",
      label: "Country",
      name: "country",
      value: "UK",
      options: ["state1", "state2", "state3", "state4"]
    },
    {
      type: "select",
      label: "State",
      value: "india",
      options: ["state5", "state6", "state7"]
    },
    {
      type: "select",
      label: "State",
      value: "USA",
      options: ["state8", "state9", "state10"]
    }
  ];
  constructor() {}
  selectcontry(e) {
    this.contry = e;
    this.contry = e.split(",");
    console.log(this.contry);
  }
  selectState(e) {
    console.log(e);
  }
}

попробуйте, я изменил структуру json. И попробуйте Демо