Angular 2 - Kann nicht eingestellt Form Array-Wert

Question

ich diesen Fehler:

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

Wenn Sie diesen Code verwenden:

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([]) 
    }) 
}); 

Innen 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 || [] 
     } 
    }); 
    } 
); 

Wenn collaborators enthält ein Wert, dh es ist nicht undefined, null oder leer [], so etwas wie:

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

Dann werden die App stürzt auf der setValue Linie in der eventSubscription.

Ich kann nicht herausfinden, warum das passiert.

Irgendwelche Ideen?

Answer 1

Initialisieren Sie das Formular-Array mit dem Steuerelement. Das würde das Problem lösen. Siehe Reactive Forms Leitfaden, wenn Sie wissen müssen, wie das geht. Wenn Sie ngModel verwenden, wäre es wahrscheinlich wert, es zu entfernen.

Answer 2

Sie müssen Ihr Formular OnInit erstellen, bevor Sie seinen Wert festlegen. Versuchen Sie etwas wie folgt:

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

Ich denke, dieser Code

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);   
    } 
}