_rawValidators of null on adding new FormGroup dynamicly

1.1k Views Asked by At

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?

0

There are 0 best solutions below