Блог

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

Я опубликую часть своего кода

 <div *ngFor="let evForm of evFormData.controls; let evseIndex = index">
      <div [formGroup]="evForm" class="column-separator">


<div
              *ngFor="let contact of evForm.get('contacts').controls; let contactIndex = index">
              <div [formGroupName]="contactIndex">
                <div fxLayout="row" class="parameterWrapper">
                  <div class="parameterLabel step">connectorType</div>
                  <modification-dropdown
                  controlName="contactType"
                  [group]="connector.controls.connectorType"
                  [formControlValue]="contact"
              
                  ></modification-dropdown>

....

  

и этот дочерний компонент выглядит следующим образом:

 <label [formGroup]="group">
  <div fxLayout="row">
    <select class="parameterInputSelect" [formControlName]="controlName">
      <option *ngFor="let value of enumValues" [value]="value">
        {{value}}</option>
    </select>
  </div>
</label>
  

и файл ts выглядит следующим образом:

 export class ModificationDropdownComponent implements OnInit {
  @Input() group: FormGroup;
  @Input() enumValues: string[];
  @Input() controlName: string;
  @Input() formControlValue: any;

  constructor(public fb: FormBuilder) { }

  ngOnInit(): void {
    console.log(this.formData);
    this.formGroup = this.fb.group({
      [this.controlName]: new FormControl(this.formData)
    });
  }

  get formData(): FormGroup {
    return this.formControlValue?.value[this.controlName] as FormGroup;
  }

}
  

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

Может быть, я что-то сделал не так, какие-либо решения?