angular - Angular FormArray:找不到带有路径的控件
问题描述
我试图构建一个 Angular Reactive 表单,其中一个帐户可以添加许多学生。
该表格似乎有效。当您点击添加学生时,它会创建一个新学生,但您检查控制台显示
ERROR 错误:找不到带有路径的控件:'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>
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
任何建议将不胜感激。
解决方案
方法 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}}
推荐阅读
- reactjs - 使用类组件反应原生导航 5 身份验证流程
- linux - 为 DNAT Nftables 创建 Set 或 Vmap
- go - 有没有办法在golang中同时检查和更改某些文件编码类型?
- c# - 从 c# 源代码中删除未使用的函数
- flutter - Carousel_Slider 不会返回数据更改的初始页面
- javascript - 如何从对象树中删除数据
- python - Python:fernet 密钥错误/NameError:未定义名称“fernet”
- javascript - 如何更新图像的 src
- java - JPanel 图像中的尺寸不正确
- java - 对多个按钮/JLabels 使用 MouseListener 的 mouseEntered 方法