Angular 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>