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.
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}}