I am trying to create a dynamic form and push some formGoups to the form, when a button is clicked.
here is some (reduced) code..
creating the form
form: FormGroup;
influencer: FormArray;
collaborations: FormArray;
ngOnInit(): void {
this.form = this.formBuilder.group({
_id: ['', Validators.required],
influencer: this.formBuilder.array([]),
});
}
creating influencer form group and collaboration group
createInfluencer() {
return this.formBuilder.group({
name: ['', Validators.required],
collaborations: this.formBuilder.array([])
});
}
createCollaboration(){
return this.formBuilder.group({
name: ['', Validators.required],
logoUrl: ['', Validators.required]
});
}
Button events to create the groups:
addInfluencer(): void {
this.influencer = this.form.get('influencer') as FormArray;
this.influencer.push(this.createInfluencer());
}
addCollaboration(index): void {
const influencer = this.form.get('influencer') as FormArray;
this.collaborations = influencer.controls[index].get('collaborations') as FormArray;
this.collaborations.push(this.createCollaboration());
}
Creating Influencer Group works nice, but on creating a collaboration group i`m getting this error:
ERROR TypeError: Cannot read property '_rawValidators' of null
And i not unterstand why this occurs. Can someone explain why the error occurs?