- 首页
- 其他开发
- Angular FormArray:找不到带有路径的控件
Angular FormArray:找不到带有路径的控件
[英] Angular FormArray: Cannot find control with path
本文介绍了Angular FormArray:找不到带有路径的控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试构建一个 Angular Reactive 表单，其中一个帐户可以添加许多学生.
表格似乎有效.当您点击添加学生"时，它会创建一个新学生，但您可以查看控制台上显示的
<块引用>
ERROR 错误:找不到路径控制:'studentsArray -> 1 ->名字
等数组中的每个控件.
app.component.html
<div><input formControlName="lastName" placeholder="Last name">
<div><input formControlName="phone" placeholder="Phone">
<div><input formControlName="email" placeholder="Email">
<button (click)="addStudent()" *ngIf="!showStudentForm">添加学生</button><div formArrayName="studentsArray"><div *ngFor="let student of StudentsArray.controls; let i = index" [formGroupName]="i"><input formControlName="firstName" placeholder="名字"><input formControlName="lastName" placeholder="Last Name"><input formControlName="dob" placeholder="出生日期">
app.component.ts
import { Component, Input, OnChanges } from '@angular/core';import { FormGroup, FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {@Input() 帐号:帐号；accountForm:FormGroup；构造函数(私人FB:FormBuilder){this.createForm();}创建表单(){this.accountForm = this.fb.group({'名': ''，'姓': ''，'电子邮件': ''，'电话': ''，'studentsArray': this.fb.array([])});}ngOnChanges() {this.rebuildForm();}重建表格(){this.accountForm.reset({名字:this.account.firstName，姓氏:this.account.lastName，电子邮件:this.account.email，电话:this.account.phone});this.setStudents(this.account.students);}获取学生数组():FormArray {返回 this.accountForm.get('studentsArray') 作为 FormArray;}设置学生(学生:学生 []){const studentFGs = student.map(student => this.fb.group(student));const studentFormArray = this.fb.array(studentFGs);this.accountForm.setControl('studentsArray', studentFormArray);}添加学生(){this.studentsArray.push(this.fb.group(new Student()));}}导出类帐户{公共名字:'';公共姓氏:'';公共邮箱:'';公共电话: '';公共学生:学生[]；}导出类学生{名: '';姓: '';多布:'';}
https://stackblitz.com/edit/angular-rqvv3a
任何建议将不胜感激.
解决方案
方法一:代码示例在您的组件中:
addStudent() {this.studentsArray.push(this.fb.group({firstName:new FormControl (""),lastName: 新的 FormControl (""),dob: 新的 FormControl ("")}))}
方法二:代码示例在您的组件中:
import { Student } from './student.model'添加学生(){this.studentsArray.push(this.fb.group(new Student()));}
创建学生模型:文件名:student.model.ts
文件内容:
导出类Student{构造函数(公共名字:字符串，公共姓氏:字符串，公共事务:字符串){}}
对于方法 1 或 2:
在您的 HTML 中:
您可以像这样显示表单的值以便于测试:
{{accountForm.value |json}}
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}}
这篇关于Angular FormArray:找不到带有路径的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
