CODEWITHSUNDEEP
angular
Niladri Banerjee - Uttarpara
Niladri Banerjee - Uttarpara

Reputation: 2329

Angular formGroup: Cannot find control with path

In Angular, I want to create "add more fields" dynamically. 

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
....
....
export class CastComponent implements OnInit {
public form: FormGroup;
public contactList: FormArray;
get contactFormGroup() {
  return this.form.get('contacts') as FormArray;
}
ngOnInit() {
  this.form = this.fb.group({
    crew_name: [null],
    crew_role: [null],
    contacts: this.fb.array([this.createContact()]),
  });
  this.contactList = this.form.get('contacts') as FormArray;
}
...
...
}

In the .html file:

<form [formGroup]="form" (submit)="submit()">
<p class="mb-3">&nbsp;</p>
<h3>Crew</h3>
<div class="row mb-4">
    <div class="col-sm-12 col-md-6 col-lg-6">
        <label class="required">Member Name</label>
        <input type="text" class="form-control" >
    </div>
    <div class="col-sm-12 col-md-6 col-lg-5">
        <label class="required">Role</label>
        <!-- <input type="text" class="form-control" value="Director"> -->
        <select class="form-control" type="text" >
          <option value="">Select</option>
          <option value="1">Director</option>
          <option value="2">Music Composer</option>
          <option value="3">Writer</option>
        </select>
    </div>
</div>

<span formArrayName="contacts">
  <div class="row mb-4" *ngFor="let contact of contactFormGroup.controls; let i = index;">
    <div class="col-sm-12 col-md-6 col-lg-6">
        <input type="text" class="form-control" formControlName="crew_name">
    </div>
    <div class="col-sm-12 col-md-6 col-lg-5">
        <!-- <input type="text" class="form-control" value="Writer"> -->
        <select class="form-control" type="text" formControlName="crew_role">
          <option value="">Select</option>
          <option value="1">Director</option>
          <option value="2">Music Composer</option>
          <option value="3">Writer</option>
        </select>
    </div>
    <div class="col-sm-1 col-md-1 col-lg-1"><p class="add-more mb-3"><a href="javascript:void(0)" (click)="removeContact(i)"> - remove</a></p></div>
</div>
</span>
<p class="add-more mb-3"><a href="javascript:void(0)" (click)="addContact()">+ add</a></p>
<div class="row">
    <div class="col-12 text-right">
        <button class="btn btn-primary" type="submit">Save & Next</button>
    </div>
</div>
</form>

In the console, I see the error below:

ERROR Error: Cannot find control with path: 'contacts -> crew_name'

Also, when submitted, the contacts array shows blank

contacts: Array(1) 0: crew_name: null crew_role: null

Upvotes: 0

Views: 287

Answers (1)

Kurt Hamilton
Kurt Hamilton

Reputation: 13525

When you're inside formArrayName directive in the HTML, you need to specify the current index with [formGroupName]="i", much like you would with a form group containing named properties.

<span formArrayName="contacts">
  <div *ngFor="let contact of contactFormGroup.controls; let i = index;"
    [formGroupName]="i">
    <!-- the controls for the ith form group in the array -->
  </div>
</span>

Upvotes: 2

Related Questions