Question

我正在使用Angular 9，并且正在尝试实现一个使用reactive forms的组件。

我有以下内容：

approval-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是二维数组。

即

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

具有数组动态字段的角反应形式

4 个答案: