2

下面的 SO 问题帮助我设置了一个表单构建器、正确的验证以及来自 formBuilder 数组的一组动态输入字段。

如何在Angular2中为表单分配和验证数组

请注意此解决方案代码http://plnkr.co/edit/YoqdBEo0MihaxdhHH1FV?p=preview

在新表单上一切正常，但是在尝试从数据库中填充所述表单时我卡住了。

我正在使用以下代码，并且 initialValue 在之前的交易中从此表单中保存了多封电子邮件。我所有的其他表单域都可以正常工作。我只是不确定如何对数组进行操作。

ngOnChanges(changes: SimpleChanges): void {
  if(this.form && changes['initialValue']){
    this.emails = changes['initialValue'].currentValue.emails;
    this.form.patchValue(changes['initialValue'].currentValue);
    //console.log('emails are now', this.emails);
    //this.emailCtrl = this.fb.array([], Validators.minLength(1));
    //this.emails.forEach((email: any) => this.addEmail(email));
  }
}

如果我保留注释行，则仅数组中的第一封电子邮件在表单中正确显示。

如果我取消注释这些行并尝试使用新的电子邮件列表刷新 emailsCtrl。我收到以下错误。

ERROR Error: Cannot find control with path: 'emails -> 1 -> email'
at _throwError (forms.js:2385)
at setUpControl (forms.js:2255)
at FormGroupDirective.addControl (forms.js:6606)
at FormControlName._setUpControl (forms.js:7256)
at FormControlName.ngOnChanges (forms.js:7169)
at checkAndUpdateDirectiveInline (core.js:12092)
at checkAndUpdateNodeInline (core.js:13598)
at checkAndUpdateNode (core.js:13541)
at debugCheckAndUpdateNode (core.js:14413)
at debugCheckDirectivesFn (core.js:14354)
4

1 回答 1

1 
this.emailCtrl = this.fb.array([], Validators.minLength(1));
this.emails.forEach((email: any) => this.addEmail(email));

FormArray 应该this.emailsCtrl不是this.emailCtrl FormArrayName 是emails而 formControlName 是email

您可以根据名称访问它：

  this.emailsCtrl = this.form.get('emails') as FormArray;
  this.emails.forEach(email => this.addEmail(email));
于 2017-12-06T22:59:59.857 回答