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 }), {})
)