Angular2でデータの配列をフォームに入力するにはどうすればよいですか？

Question

以下のSOの質問は、formbuilder配列からフォームビルダ、適切な検証、および動的な入力フィールドセットをセットアップするのに役立ちました。

How to assign and validate arrays to forms in 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) 

Answer 1

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

FormArrayはthis.emailCtrl 以外のthis.emailsCtrl formArrayNameが電子メールとformControlNameあなたは名前に基づいてそれにアクセスすることができますメール

である必要があります：

this.emailsCtrl = this.form.get('emails') as FormArray; 
    this.emails.forEach(email => this.addEmail(email));