角2 - サブスクリプションでフォームを作成すると、formGroupが定義されていないとクラッシュする

Question

Firebaseデータベースにデータがあります。このデータはFormBuilderでフォームに適用します。多少はうまくいくが、formGroup expects a FormGroup instance. Please pass one in.というよりもエラーが頻繁に出る。

サブスクリプションの原因となる新しい変更をデータベースに適用すると、エラーが発生します。更新後にサブスクリプションが実行される前後にthis.settingsFormが設定されていますが、ここで

は、サブスクリプションです：

this.eventSubscription = this.af.database.object('/events/' + this.eventId).subscribe(
    (event: IEvent) => { 

    const rsvp: IRSVP = event.rsvp; 
    const settings: ISettings = event.settings; 
    const tickets: ITickets = event.tickets; 

    this.settingsForm = this.fb.group({ 
     collaborators: this.fb.array(settings.collaborators || []), 
     isRSVPOpen: settings.isRSVPOpen, 
     isAutoApproveToGuestlist: settings.isAutoApproveToGuestlist, 
     rsvp: this.fb.group({ 
     latestDate: [rsvp.latestDate, [Validators.required]], 
     latestTime: [rsvp.latestTime, [Validators.required]], 
     guestLimit: [rsvp.guestLimit, [Validators.required]], 
     isGuestPlusOne: rsvp.isGuestPlusOne, 
     isAutoApproveToGuestlist: rsvp.isAutoApproveToGuestlist, 
     isOnlyFacebookRSVP: rsvp.isOnlyFacebookRSVP, 
     isBirthdayAndPhoneRequired: rsvp.isBirthdayAndPhoneRequired 
     }), 
     tickets: this.fb.group({ 
     info: this.fb.group({ 
      closingDate: tickets.info.closingDate, 
      closingTime: tickets.info.closingTime 
     }), 
     types: this.fb.array(tickets.types || []) 
     }) 
    }); 
    } 
); 

この出来事があり、どのように私はそれを防ぐことができる理由それでは、私は思ったんだけどはありますか？このようなフォームを初期化することはできませんか？

Answer 1

*ngIf="settingsForm"を使用してください。

FormGroupが初期化されていない場合は、テンプレートで使用できません。例えば、以下はsettingsFormが初期化されていない場合は動作しません。

<form [formGroup]="settingsForm "> 
    <input formControlName="name" /> 
</form> 

ではなく、これを実行します。

<form *ngIf="settingsForm" [formGroup]="settingsForm "> 
    <input formControlName="name" /> 
</form>