Angular FormArray:找不到路径为的控件

Question

我试图构建一个Angular Reactive表单，其中一个帐户可以添加许多学生。

这张表格似乎有效。当你点击"添加学生"时，它会创建一个新学生，但你检查控制台，它会显示

错误：找不到路径为"studentsArray->1->firstName "的控件

，依此类推。

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>

应用程序组件.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

任何建议都将不胜感激。

Answer 1

方法1：代码示例在您的组件中：

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

方法2：代码示例在您的组件中：

import { Student } from './student.model'
addStudent() {
this.studentsArray.push(this.fb.group(new Student()));
}

创建学生模型：文件名：student.model.ts

文件内容：

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

对于方法1或2：

在您的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>

您可以显示表单的值以进行简单的测试，如下所示：

{{accountForm.value | json}}

Answer 2

在我使用Angular 10的情况下，经过多次尝试和研究，我终于发现了错误，我在<input>元素中使用了[formControlName]表示法，当我去掉了简单的formControlName的方括号后，它终于起作用了，不知道为什么，但我希望它能帮助