Angular FormArray: Cannot find control with path

Ty Tran

I trying to build an Angular Reactive form where an account can add many students.

The form seems to work. When you hit Add Student it creates a new student but you check the console it says

ERROR Error: Cannot find control with path: 'studentsArray -> 1 -> firstName

and so on for each control in the array.

app.component.html

<form [formGroup]="accountForm">
<div>
    <input formControlName="firstName" placeholder="First name">
</div>
<div>
    <input formControlName="lastName" placeholder="Last name">
</div>
<div>
    <input formControlName="phone" placeholder="Phone">
</div>
<div>
    <input formControlName="email" placeholder="Email">
</div>
<button (click)="addStudent()" *ngIf="!showStudentForm">Add Student</button>
<div formArrayName="studentsArray">
    <div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i">
        <input formControlName="firstName" placeholder="First Name">
        <input formControlName="lastName" placeholder="Last Name">
        <input formControlName="dob" placeholder="Date of Birth">
    </div>
</div>

app.component.ts

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 @Input() account: Account;
  accountForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

   createForm() {
    this.accountForm = this.fb.group({
      'firstName': '',
      'lastName': '',
      'email': '',
      'phone': '',
      'studentsArray': this.fb.array([])
    });
   }

   ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.accountForm.reset({
      firstName: this.account.firstName,
      lastName: this.account.lastName,
      email: this.account.email,
      phone: this.account.phone
    });
    this.setStudents(this.account.students);
  }

  get studentsArray(): FormArray {
    return this.accountForm.get('studentsArray') as FormArray;
  }

  setStudents(students: Student[]) {
    const studentFGs = students.map(student => this.fb.group(student));
    const studentFormArray = this.fb.array(studentFGs);
    this.accountForm.setControl('studentsArray', studentFormArray);
  }

  addStudent() {
    this.studentsArray.push(this.fb.group(new Student()));
  }
}

export class Account {
  public firstName: '';
  public lastName: '';
  public email: '';
  public phone: '';
  public students: Student[];
}

export class Student {
  firstName: '';
  lastName: '';
  dob: '';
}

https://stackblitz.com/edit/angular-rqvv3a

Any suggestion will be much appreciated.

Farasi78

Method 1: Code example In your Component:

  addStudent() {
    this.studentsArray.push(this.fb.group({
      firstName:new FormControl (""),
      lastName: new FormControl (""),
      dob: new FormControl ("")
    }))
  }

Method 2: Code example In your component:

import { Student } from './student.model'

 addStudent() {
    this.studentsArray.push(this.fb.group(new Student()));
  }

Create Student Model: file name: student.model.ts

file contents:

export class Student{
  constructor(
    public firstName:string,
    public lastName:string,
    public dob:string
  ){}
}

For either Method 1 or 2:

In your Html:

<div formArrayName="studentsArray" ">
    <div *ngFor="let student of studentsArray.controls; let i = index" formGroupName="{{i}}">
        <input formControlName="firstName" placeholder="First Name">
        <input formControlName="lastName" placeholder="Last Name">
        <input formControlName="dob" placeholder="Date of Birth">
    </div>
</div>

You can display the value of the form for easy testing like this:

{{accountForm.value | json}}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 2 Form "Cannot find control with path"

Angular 2 Reactive Forms cannot find control

Angular 2 Reactive Forms: Cannot find control with path

Angular material stepper: Error: Cannot find control with name: 'formArray'

Angular2: Cannot find form control at index 1 at FormArray

Angular 5 FormArray > Cannot find control with path: 'fields -> 0 -> name'

ERROR Error: Cannot find control with path

Angular Reactive Forms: Cannot find control with path:

Cannot find control with path 'myFormArray -> [index] -> myProperty

Angular: Cannot find control with path: 'variable-> 0 -> id'

Error: Cannot find control with path: 'x ' angular 2

Angular: Cannot find control with name: 'date'

angular 4: nested form fields : Cannot find control with path

FormArray : Cannot find control with unspecified name attribute in angular6

Angular 7 and form arrays error of cannot find a control with path

Cannot find control with path: 'marketplace -> 1 -> marketplace'

Angular 8 and form arrays error cannot find control with path: index

Angular Deeply Nested Reactive Form: Cannot find control with path on nested FormArray

Cannot Find Control with Path Using ngIf on Recursive Angular Form

Angular 6 Forms Cannot find control error

"Cannot find control with path" but cannot figure out why - Angular 5

Angular Form Array Cannot find control with path

Cannot find control with path: 'members -> 0 ->

Angular Cannot find control with unspecified name attribute

Cannot find control with path: 'plans -> 0'

Angular Error As Cannot find control with path: '_OSkilss -> 0 -> Imageuploade'

ERROR Error: Cannot find control with path: Angular FormArray

Error: Cannot find control with path: 'specs -> 2' FormArray checkbox list

Angular. FormArray. Cannot find control with path: 'jobs -> 0 -> name'