使用formGroupName时无法编辑输入字段

Question

这就是我设置表单控件的方式：

formMain = this.fb.group({ 
  details: this.fb.array([
    new FormGroup({
      label: new FormControl(''),
      description: new FormControl(''),
    })
  ])
});

我的 HTML 有一些动态输入字段：

<div formArrayName="details">
  <div *ngFor="let detail of formMain.value.details; index as i">
    <mat-form-field appearance="fill">
      <mat-label>Label of a detail</mat-label>
      <input id="detail-label" matInput type="text" [value]="detail.label">
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Description of a detail</mat-label>
      <input id="detail-description" matInput type="text" [value]="detail.description">
    </mat-form-field>
  </div>
</div>

这个效果很好。因此，如果表单控件包含值，它们将被传递到输入字段的值。我可以编辑这些值，但是，新值不会存储在表单控件中。这可能是因为我没有使用

formControlName

。

这就是我添加

formControlName

以及

[formGroupName]="i"

的方式：

<div *ngFor="let detail of formMain.value.details; index as i" [formGroupName]="i">
  <mat-form-field appearance="fill">
    <mat-label>Label of a detail</mat-label>
    <input id="detail-label" matInput type="text" [value]="detail.label" formControlName="label">
  </mat-form-field>
...

我没有收到任何错误，但我无法再编辑输入字段的值。我也无法用鼠标聚焦输入字段，甚至无法标记值。输入字段被完全锁定。这是我在 DOM 中看到的：

<div class="mat-form-field-infix ng-tns-c97-1030"><input _ngcontent-lqv-c198="" id="detail-label" matinput="" type="text" formcontrolname="label" class="mat-input-element mat-form-field-autofill-control ng-tns-c97-1030 ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored" ng-reflect-name="label" ng-reflect-id="detail-label" ng-reflect-type="text" ng-reflect-value="Brooklyn" aria-invalid="false" aria-required="false"><span class="mat-form-field-label-wrapper ng-tns-c97-1030"><label class="mat-form-field-label ng-tns-c97-1030 ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-2045" ng-reflect-ng-switch="true" for="detail-label" aria-owns="detail-label"><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--><mat-label _ngcontent-lqv-c198="" class="ng-tns-c97-1030 ng-star-inserted">Label of a detail</mat-label><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></label><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span></div>

发生这种情况是因为

[formGroupName]="i"

。如果我删除它，我可以编辑输入字段的值，但随后我收到错误：

错误错误：找不到路径为“详细信息 -> 标签”的控件

我该如何解决这个问题？

Answer 1

您应该循环

details

FormArray

的表单控件，而不是

*ngFor

中的详细信息数组中的对象。

并且您不需要提供

[value]

属性，因为应用

formControlName

属性时，输入字段将与值绑定。

<div
  *ngFor="let detail of detailsFormArray.controls; index as i"
  [formGroupName]="i"
>
  <mat-form-field appearance="fill">
    <mat-label>Label of a detail</mat-label>
    <input id="detail-label" matInput type="text" formControlName="label" />
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Description of a detail</mat-label>
    <input
      id="detail-description"
      matInput
      type="text"
      formControlName="description"
    />
  </mat-form-field>
</div>

get detailsFormArray() {
  return this.formMain.controls.details as FormArray;
}

演示@StackBlitz

参考：Angular FormArray：完整指南