Angular 具有來自數組的動態字段的反應式表單

Question

我正在使用 Angular 9，並且正在嘗試實現一個使用反應式 forms的組件。

我有以下內容：

批准-edit.component.ts

  public nominationAllOf: NominationAllOf[];
  public approvalEditForm: FormGroup;

  ngOnInit(): void {
    this.approvalEditForm = new FormGroup({
      userName00: new FormControl(),
      userName01: new FormControl(),
      userName02: new FormControl(),
      userName10: new FormControl(),
      userName11: new FormControl(),
      userName12: new FormControl()
   })
  }

這可行，但是，您可以看到表單組值需要根據數組中的值（ nominationAllOf ）是動態的。

nominationAllOf是一個二維數組。

IE

export interface NominationAllOf {
    nominations: NominationAnyOf[];
}

和

export interface NominationAnyOf {
    name: string;
}

問題

是否可以動態填充FormGroup ？

例如（這不起作用）

    this.approvalEditForm = new FormGroup({
      for (i = 0; i < nominationAllOf.length; i++) {
           for (j = 0; j < nominationAllOf[i].length; j++) {
               'userName'+i+''+j: new FormControl(nominationAllOf[i].nominationAnyOf[j].name)
           }
      }
      
   })
  }

Answer 1

以下作品（即addControl ）：

  private loadForm(): void {
    for (let i = 0; i < this.nominationAllOf.length; i++) {
      let nominationAnyOf: NominationAnyOf[] = this.nominationAllOf[i].nominations;
      for (let j = 0; j < nominationAnyOf.length; j++) {
          let name = nominationAnyOf[j].evaluatorInfo.personalInfo.name.firstName;
          this.approvalEditForm.addControl('userName'+i+''+j, new FormControl(name));
        }
      }
  }

Answer 2

有一種方法可以使用 FormArray。 你有它記錄在這里： https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a

對於您的示例，它將像這樣工作：

this.approvalEditForm = new FormGroup({
  userNames: new FormArray([
    new FormControl(),
    new FormControl(),
    new FormControl(),
    new FormControl(),
  ]),
});

由於您有元素數組，只需使用map()方法初始填充它們，當您渲染它們時，您將使用ngFor並按該順序顯示它們。 如果您想動態添加，只需像使用常規數組一樣從該 FormArray 中推送其中一個，或者如果您想刪除一個，您可以使用 FromArray 中的removeAt(indexNumber)方法。 您還可以使用insert和clear方法從 FromArray 添加或清除所有元素

Answer 3

使用括號表示法創建動態密鑰。

  this.approvalEditForm = new FormGroup({
      for (i = 0; i < nominationAllOf.length; i++) {
           for (j = 0; j < nominationAllOf[i].length; j++) {
               ['userName'+i+''+j]: new FormControl(nominationAllOf[i].nominationAnyOf[j].name)
           }
      }
      
   })
  }

Answer 4

以下情況如何：

constructor(private fb: FormBuilder) { }

ngOnInit(): void {
  this.approvalEditForm = this.fb.group(
    this.nominationAllOf
      .map((x, xi) => x.nominations.map(({ name }, yi) => ({ [`userName${xi}${yi}`]: [name] })))
      .reduce((x, y) => ({ ...x, ...y.reduce((a, b) => ({ ...a, ...b }), {}) }), {}) // double flattening 
  )
}

或者使用Flat

this.approvalEditForm = new FormGroup(
  this.nominationAllOf
    .map((x, xi) => x.nominations.map(({ name }, yi) => ({ [`userName${xi}${yi}`]: new FormControl(name) })))
    .flat()
    .reduce((x, y) => ({ ...x, ...y }), {})
)