Error: Cannot find control with path: 'FormArray -> FormControlName' Angular

Question

This is the structure of my form:

this.formData = new FormGroup({
  selectedAnimal: new FormArray([], [Validators.required]),
  selectedTransport: new FormArray([], [Validators.required]),
  roadName: new FormControl({ disabled: true, value: null }, Validators.required),
  roadZip: new FormControl({ disabled: true, value: null }, Validators.required),
  planeName: new FormControl({ disabled: true, value: null }, Validators.required),
  planeZip: new FormControl({ disabled: true, value: null }, Validators.required)
});

Corresponding HTML

<form [formGroup]="formData" (ngSubmit)="onSubmit()">
  <div class="animal-checkbox-group" formArrayName="selectedAnimal">
    <!-- multiple checkbox options, selecting one is mandatory -->
  </div>

  <div class="animal-checkbox-group" formArrayName="selectedTransport">
    <!-- multiple checkbox options, selecting one is mandatory -->
    <div class="if-checkbox-1-selected">
      <!-- conditional checkbox: if checkbox is selected -> new new form controls -> they should be defined for successful validation -->
      <input type="text" formControlName="roadName">
    </div>
  </div>
</form>

ERROR:

ERROR Error: Cannot find control with path: 'selectedTransport -> roadName'

That because formControlName="roadName" is under selectedTransport formArray. You either have to change the structure of your html to make formControlName="roadName to be under [formGroup]="formData" or push controls to the formArray and loop them in template — user12251399
– user12251399, Commented May 8, 2021 at 17:09

Devang Patel · Accepted Answer · 2021-05-08 17:22:09Z

3

In your case control is rendered inside the formarray abstract control so You must need to provide form group to all your controls name as mentioned below:

<div [formGroup]="formData">
    Road Name: <input type="text" formControlName="roadName">
</div>

Here is working code : stackblitz

answered May 8, 2021 at 17:22

Devang Patel

1,8638 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error: Cannot find control with path: 'FormArray -> FormControlName' Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related