首页 文章

Angular FormArray:找不到路径控件

提问于
浏览
1

我试图构建一个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 回答

  • 1

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

相关问题