angular - 为什么在此 FormArray 中无法编辑 mat-form-field？

Question

下面的表格几乎可以做它应该做的事情，只是我不能编辑任何 mat-form-field在里面。它们没有被禁用，只是无法编辑它们。

这是什么原因？

见:StackBlitz

我没有看到与 this example 的区别在 StackBlitz 上。

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, FormArray, FormControl} from '@angular/forms';

@Component({
  selector: 'form-field-label-example',
  templateUrl: 'form-field-label-example.html',
  styleUrls: ['form-field-label-example.css'],
})
export class FormFieldLabelExample {

  public dataList = [
    {name: 'Alice'},
    {name: 'Bob'}
  ]

  public form: FormGroup;

  constructor(private _fb: FormBuilder) {

    const formArray = this._fb.array([]);  

    for (const data of this.dataList) {
      formArray.push(
        this._fb.group({name: new FormControl(data.name)})
      );      
    }

    this.form = this._fb.group({
      offers: formArray
    });

  }

}

<div>

  <form [formGroup]="form">

    <div formArrayName="offers" *ngFor="let data of form.controls.offers?.value; let i = index;">
      <ng-container [formGroupName]="i">
        <mat-form-field>
          <input matInput placeholder="Name" formControlName="name">
        </mat-form-field>
      </ng-container>
    </div>

  </form>

  <span *ngIf="form.dirty">DIRTY</span>

  <mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>

</div>

Answer 1

它确实与 ngFor 渲染行为有关。

更准确地说，如果 ngFor 中使用的数组更改了对该数组元素的引用(并且我们没有提供自定义 trackBy 函数来覆盖比较)，那么 Angular 将识别这些更改并重新渲染 View 。


Angular 表单经常可以触发 AbstractControl.updateValueAndValidity所有控件层次结构的方法。

FormControl -> parent -> FormGroup -> parent -> FormArray -> parent -> FormGroup

对于 FormGroup它触发以下方法:

_updateValue(): void { (this as{value: any}).value = this._reduceValue(); }

这基本上创建了一个新对象，即 {name: 'Alice'}下次触发时，它将用新值覆盖当前值。

{name: 'Alice'} !== {name: 'Alice'}

这正是 Angular 默认在 ngForOf 指令中识别的差异。

你可能会问？

那为什么我看不到 this example 的区别？在 StackBlitz 上？

在那个例子中，问题仍然存在，但第一眼看不出来。

|username  password
  /\
click here(it works)

username  password
            /\
     then click here(it doesn't since the dom was rerendered)

您的示例与上面的示例之间的区别在于您使用了 Material 控件和 AbstractControl.updateValueAndValidity 的触发器。发生得更早。

那么有什么解决办法呢？

1) 前面提到的 trackBy 属性

trackByFn(index) {
  return index;
}

*ngFor="let data of form.controls.offers?.value; let i = index; trackBy: trackByFn"

Stackblitz Example

2) 分配 this.form.controls.offers.value组件属性并使用它。

arr;
...
this.arr = this.form.controls.offers.value;

*ngFor="let data of arr; let i = index;"

Stackblitz Example