angular - 无法从嵌套角度表单中的子组件获取更改

Question

我在以嵌套的角度形式从子组件获取更改时遇到问题，这种形式是动态形式，可以添加新元素。

我将发布我的代码的一部分

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

}

但是当我调试时，我看不到父表单的任何更改，如果我从下拉列表中选择一些值

也许我做错了什么，有什么解决办法吗？

标签： angulartypescriptnested-forms