我试图建立一个Angular Reactive表单,其中一个帐户可以添加许多学生。
该表格似乎有效。当您点击添加学生时,它会创建一个新学生,但是您在控制台上看到它说
错误错误:找不到路径为'studentsArray-> 1->的控件 名字
,依次类推数组中的每个控件。
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
任何建议将不胜感激。
答案 0 :(得分:5)
方法1: Code example 在您的组件中:
addStudent() {
this.studentsArray.push(this.fb.group({
firstName:new FormControl (""),
lastName: new FormControl (""),
dob: new FormControl ("")
}))
}
方法2: Code example 在您的组件中:
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}}