Angular 角度格式数组：找不到具有路径的控件

我试图建立一个角度反应形式，其中一个帐户可以添加许多学生

这个表格似乎有效。当你点击addstudent时，它会创建一个新的Student，但你会检查控制台上的显示

错误：找不到路径为“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>

任何建议都将不胜感激

方法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>

---

感谢您的快速回复@Farasi78。真管用！我希望通过一个模型来传递它，而不是输入所有的控件。有没有办法做到这一点？如果你想这样做，创建一个学生作为一个模型，并导入它-我尝试了它的定义内联，它似乎没有工作。检查一下。@Ty你成功了吗？如果是，且该答案正确，请酌情说明。谢谢不客气！第二种方法允许您对模型执行此操作，而不必单独指定每个控件。

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