2角度に設定することはできませんフォームの配列値

Question

は、私はこのエラーを取得します値がありません。つまり、undefined、nullまたは空のです、のようなもの：

[ 
    { 
    email: 'foo@bar.com', 
    role: 1 
    }, 
    { 
    email: 'baz@bar.com', 
    role: 2 
    } 
] 

その後eventSubscriptionでsetValueライン上のアプリがクラッシュします。

なぜこれが起こっているのかわかりません。

アイデア？

Answer 1

コントロールでフォーム配列を初期化します。それは問題を解決するだろう。方法を知る必要がある場合は、Reactive Formsガイドを参照してください。 ngModelを使用している場合は、それを削除する価値があります。

Answer 2

値を設定する前に、フォームOnInitをビルドする必要があります。

settingsForm: FormGroup; 

buildForm(): void { 
    settingsForm: FormGroup = this.fb.group({ 
     //content of settingsForm 
    }) 
} 

ngOnInit() { 
    this.buildForm(); 
    this.eventSubscription = this.af.database.object('/events/' + this.eventId) 
    //... 
    this.settingsForm.setValue({ //you can try .patchValue to set only available value 
     //... 
    }) 
} 

Answer 3

私は、このコードは、私はすぐにやっているまさにだ

import { FormArray, FormBuilder, FormGroup} from '@angular/forms'; 

export class SomeComponent implements OnInit { 

consutructor(public fb:FormBuilder) { } 

    public buildcollaboratorsGroup(fb:FormBuilder):FormGroup { 
     return fb.group({ 
          email:'', 
          role:'' 
       }); 
    } 

ngOnInit() { 
    public settingsForm: FormGroup = this.fb.group({ 
    collaborators:this.fb.array([this.buildcollaboratorsGroup(this.fb)]) 
    });  

    this.setFormArrayValue(); 
} 


    // I am trying set only one value if it's multiple use foreach   
    public setFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
     controlArray.controls[0].get('email').setValue('yourEmailId@gmail.com'); 
     controlArray.controls[0].get('role').setValue(2); 
    } 

    // I am trying remove only one value if it's multiple use foreach   
    public removeFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
      controlArray.removeAt(0);   
    } 
}