ANGULAR Cannot find control with path: ‘childrenFormArray -> [object Object] -> gender’

Published

I am working on an angular project and I am trying to add multiple children with their age and gender dynamically with reactive forms . Though the form is being added , the delete part of it is not working. Everytime I try to add , an error keeps popping up

Cannot find control with name: 'childrenFormArray'

This is my ts code

 ngOnInit(): void {
 this.childrenFormGroup= this.formBuilder.group({
 childrenFormArray: this.formBuilder.array([ this.createItem() ])
 });
 }

 createItem(): FormGroup {
 return this.formBuilder.group({
 gender: new FormControl(''),
 age:  new FormControl(''),
  
 });
 }

 addItem(): void {

 if(this.childrenFormGroup.get('childrenFormArray')   
 ['controls'].length<this.numberOfChildren)
 {
 this.childrenFormArray = this.childrenFormGroup.get('childrenFormArray') as FormArray;
 this.childrenFormArray.push(this.createItem()); 
 this.addItem();
 }
 else if(this.childrenFormGroup.get('childrenFormArray') 
 ['controls']>this.numberOfChildren) 
 {
 this.childrenFormArray = this.childrenFormGroup.get('childrenFormArray') as FormArray;
 this.childrenFormArray.removeAt(this.childrenFormArray.length-1);
 this.addItem
 }

 }

This my html code to print the form

 <div class="col-12 ">
 <fieldset class="form-group ">
 <label class="form-label " for="numberOfChildren">Number Of Children</label>
                        <input type="number" class="form-control " id="numberOfChildren"   [ngModelOptions]="{standalone: true}" placeholder="Enter number of children" (input)="addItem()" [(ngModel)]="numberOfChildren" required>
                        <div formArrayName="childrenFormArray"
                        *ngFor="let item of childrenFormGroup.get('childrenFormArray')['controls']; let i = index;">
                        <div [formGroupName]="childrenFormGroup.get('childrenFormArray')['controls'][i]">
                            <select formControlName="gender" >
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Others</option>
                            </select>
                            <input type="number" formControlName="age" placeholder="Age of 
                            Child">
                       
                          </div>

Source: Angular Questions

Published
Categorized as angular, reactive-forms Tagged ,

Answers

You need to ensure that your html matches your form e.g your form has the structure

  childrenFormGroup: FormGroup
    childrenFormArray : FormArray
      [0] : FormGroup
          gender: FormControl
          age: FormControl
      [1] : FormGroup
          gender: FormControl
          age: FormControl

Now we can go back to your form and try to meet above

<form [formGroup]='childrenFormGroup'>
    <div class="col-12 ">
     <fieldset class="form-group ">
       <label class="form-label " for="numberOfChildren">Number Of Children</label>
          <input type="number" class="form-control " id="numberOfChildren"   [ngModelOptions]="{standalone: true}" placeholder="Enter number of children" (input)="addItem()" [(ngModel)]="numberOfChildren" required>
          <ng-container formArrayName="childrenFormArray">
            <div *ngFor="let item of childrenFormGroup.get('childrenFormArray')['controls']; let i = index;" [formGroupName]='i'>
             <div>
                <select formControlName="gender" >
                   <option value="male">Male</option>
                   <option value="female">Female</option>
                   <option value="other">Others</option>
                </select>
                 <input type="number" formControlName="age" placeholder="Age of Child">
      </div>

Note this two lines

<ng-container formArrayName="childrenFormArray">
...
 [formGroupName]='i'

Hyman Walsh

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq