Angular 2 Reactive Froms - オブジェクト全体を一度にバインドする

Question

Angular 2の反応型を学習しています。すべてのオブジェクトプロパティを一度にバインドできるかどうかは疑問でした。私が見た各ガイドでは、そのようなことを示しています。

this.form = this.fb.group({ 
    name: ['', Validators.required], 
    event: this.fb.group({ 
     title: ['', Validators.required], 
     location: ['', Validators.required] 
    }) 
}); 

は、そのような値が設定：あなたは、多くの場合、多くのをバインドする必要があるので、私にとっては

this.form.setValue({ 
    name: object.name, 
    event: object.event 
}); 

を、これは、実際の状況でなんとかものではありませんそれらを定義することは本当に便利ではありません。モデルが変更された場合は、両方の場所でモデルを更新する必要があります。

だから私はこの試みた：

this.refundRecordForm = this.fb.group(new RefundRecord()); 
this.refundRecordForm.setValue(this.refundRecord); 

をしかし、私はこのエラーを得た：私はpatchValue代わりのsetValue、エラーなしを使用しますが、フォームにはコントロールが含まれていない場合

Error: There are no form controls registered with this group yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout)

を。

私は手作業でいくつかのフィールドをバインドしようとしましたが、それは私の推測では、一度にオブジェクト全体をバインドできないということです。

私はそれが可能かどうか疑問に思っています。私はこれに非常に新しいので、多分私は何かが明らかでない欠場しています。

あなたはどう思いますか？

Answer 1

このコード行：RefundRecordはFormControlsのセットとして定義されていない限り

this.refundRecordForm = this.fb.group(new RefundRecord()); 

は動作しません。

対応するフォームを使用するには、フォームグループと関連するFormControlsを作成する必要があります。

this.form = this.fb.group({ 
    name: ['', Validators.required], 
    event: this.fb.group({ 
     title: ['', Validators.required], 
     location: ['', Validators.required] 
    }) 
}); 

そして、あなたのショートカット構文を使用して値を代入してみてください：それはあなたがそれを持っていたとして、あなたは、フォームを作成しようとすることができ、あなたが

を取得しているエラーメッセージの意味だ

this.form.setValue(this.refundRecord); // or .patchValue 

それがうまくいくかどうかわかりません、私はそれを試していないので、あなたがどのようにしているかをお知らせください。または、プランカを構築することができ、それを試すことができます。

また、次の情報もご覧ください。https://angular.io/guide/dynamic-form動的フォームを作成する方法を示しています。

Answer 2

ここで行う必要があるのは、カスタムタイプのFormGroupを返す関数を1つ作成するだけです。それ以外は同じままです。

例えば、これを変更します。これに

this.refundRecordForm = this.fb.group(new RefundRecord()); 
this.refundRecordForm.setValue(this.refundRecord); 

：

initRefundRecord(record: RefundRecord = new RefundRecord()): FormGroup { 
    return this.fb.group({ 
     name: [record.name, Validators.required], 
     event: this.fb.group({ 
      title: [record.event.title, Validators.required], 
      location: [record.event.location, Validators.required] 
     }) 
    }); 
} 

// Set to new empty form group of refund record type 
this.refundRecordForm = this.initRefundRecord(); 

// Update the value later 
this.refundRecordForm.patchValue(this.refundRecord); 

をそのアプローチでは、あなたは、単に次の操作を行うことができ、既存の値を持つフォームを作成する場合：

// Set to new prefilled form group of refund record type 
this.refundRecordForm = this.initRefundRecord(preexistingRecord); 

// Update the value later 
this.refundRecordForm.patchValue(this.refundRecord); 

すべてが同じです。これで、フィールドの追加などを行うときに、initRefundRecordの内部で作成されるフォームグループを変更する必要があります。