me sale este error:
Todavía no hay controles de formulario registrados con esta matriz. Si está utilizando ngModel, es posible que desee verificar el próximo tic (por ejemplo, use setTimeout).
Al usar este código:
public settingsForm: FormGroup = this.fb.group({ collaborators: this.fb.array([]), rsvp: this.fb.group({ latestDate: ['', [Validators.required]], latestTime: ['', [Validators.required]], guestLimit: ['', [Validators.required]], isRSVPOpen: false, isGuestPlusOne: false, isAutoApproveToGuestlist: false, isOnlyFacebookRSVP: false, isBirthdayAndPhoneRequired: false }), tickets: this.fb.group({ info: this.fb.group({ closingDate: '', closingTime: '' }), types: this.fb.array([]) }) }); Dentro ngOnInit :
this.eventSubscription = this.af.database.object('/events/' + this.eventId) .filter(event => event['$value'] !== null) .subscribe((event: IEvent) => { const settings: ISettings = event.settings; const collaborators: ICollaborator[] = settings.collaborators; const rsvp: IRSVP = settings.rsvp; const tickets: ITickets = settings.tickets; this.settingsForm.setValue({ collaborators: collaborators || [], rsvp: rsvp, tickets: { info: tickets.info, types: tickets.types || [] } }); } ); Cuando los collaborators contienen un valor, es decir, no es undefined , null o vacío [] , algo como:
[ { email: 'foo@bar.com', role: 1 }, { email: 'baz@bar.com', role: 2 } ] Luego, la aplicación falla en la línea setValue en eventSubscription .
No puedo entender por qué sucede esto.
¿Algunas ideas?
Antes de llamar a setValue(data) en un FormGroup o FormArray, el FormGroup o FormArray debe tener exactamente la misma estructura de los data . Solo importa la estructura, el valor en FormGroup o FormArray será reemplazado por data .
Ejemplo, si sus datos son
let data = [ {a: 1, b:2}, {a: 3, b: 4} ] Luego, FormArray debe tener 2 FormGroups y cada FormGroup debe tener un FieldControl llamado a y otro llamado b . Puedes hacer algo como esto:
let fa = this.formBuilder.array([ this.formBuilder.group({a: 0, b:0}), this.formBuilder.group({a: 0, b:0}) ]) fa.setValue(data)Si sus datos tienen una estructura más compleja, FormArray debe tener la misma estructura compleja.
Inicialice la matriz de formulario con el control. Eso resolvería el problema. Consulte la guía de formularios reactivos si necesita saber cómo hacerlo. Si está utilizando ngModel , probablemente valga la pena eliminarlo.
Debe crear su formulario OnInit antes de establecer su valor. Prueba algo como esto:
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 //... }) }