如何在 Angular 2.4 中使用 FormArray

Question

我正在使用 Angular 2.4，需要使用“FormArray”制作动态表单，但 HTML 根本无法识别我的数组。 我有这样的错误： 原因：找不到名称为“0”的控件

ts 文件：

    import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'my-formstwo',
  templateUrl: "app/fromstesttwo/fromstesttwo.component.html",
})
export class FromstesttwoComponent  {

    myForm: FormGroup;
    constructor(){
        this.myForm = new FormGroup({
            'dataforms': new FormGroup({
                'username': new FormControl('sh', [Validators.required,Validators.minLength(3)]),
                'email': new FormControl('', 
                    [
                        Validators.required, 
                        Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
                    ])
                }),
            'password': new FormControl('', Validators.required),
            'gender': new FormControl('Fmale',Validators.required),
            'hobys': new FormArray([
                new FormControl('SF')
            ])
        });
    }
    get hobyss(): FormArray { return this.myForm.get('hobys') as FormArray; }
    addHobys() {
     this.hobyss.push(new FormControl()); 
    }
    genders:Array<string> = [
        'Male',
        'Fmale'
    ]
    onSubmit(){
        console.log(this.myForm);
    }
}

html 文件：

<div class="clearfix"> </div>
<p> </p>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div formGroupName="dataforms">
 <div class="form-group">
    <label for="exampleInputEmail1">Username</label>
    <input 
      type="username" 
      class="form-control" 
      id="exampleInputEmail1" 
      placeholder="Username"
      formControlName="username">
  </div>

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input 
      type="email" 
      class="form-control" 
      id="exampleInputEmail1" 
      placeholder="Email"
      formControlName="email">
      <div *ngIf="!myForm.controls.dataforms.controls.email.valid">
        email inValid
      </div>
  </div>
</div>


  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input 
      type="password" 
      class="form-control" 
      id="exampleInputPassword1" 
      placeholder="Password"
      formControlName="password">
  </div>

  <div class="form-group">
    <div class="radiobottom" *ngFor="let g of genders">
      <input type="radio" name="gender" [value]="g" formControlName="gender">
      {{g}}
    </div>
  </div>


  <div FormArrayName="hobys">
    <div class="form-group" *ngFor="let h of myForm.controls.hobys.controls; let i=index">
     <p> </p>
        <input 
          type="text"
          class="form-control" 
          formControlName="{{ i }}">
    </div> 
  </div>

  <button type="button" class="btn btn-primary" (click)="addHobys()">Hoby</button>
  <button type="submit" class="btn btn-default" [disabled]="!myForm.valid">Submit</button>


</form>

我的错误控制台：

EXCEPTION: Error in app/fromstesttwo/fromstesttwo.component.html:53:10 caused by: Cannot find control with name: '0'

Answer 1

问题在于它是formArrayName，而不是FormArrayName：

<div formArrayName="hobys">
  <div class="form-group" *ngFor="let h of myForm.controls.hobys.controls; let i = index">
    <p></p>
    <input type="text" class="form-control" formControlName="{{i}}">
  </div> 
</div>

奖励：

作为提示，您可以在您的组件中为您的controls 创建引用，如下所示：

export class FromstesttwoComponent {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  emailCtrl: FormControl;
  passwordCtrl: FormControl;
  genderCtrl: FormControl;
  hobbiesCtrl: FormControl;
  dataFormsCtrl: FormGroup;
  hobbiesCtrl: FormArray;

  constructor() {
    this.usernameCtrl = new FormControl('sh', [Validators.required,Validators.minLength(3)]);
    this.emailCtrl = new FormControl('', 
      [
          Validators.required, 
          Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
      ]
    );
    this.passwordCtrl = new FormControl('', Validators.required);
    this.genderCtrl = new FormControl('Fmale',Validators.required);
    this.hobbiesCtrl = new FormArray([new FormControl('SF')]);

    this.dataFormsCtrl = new FormGroup({
      'username': this.usernameCtrl,
      'email': this.emailCtrl
    });

    this.myForm = new FormGroup({
      'dataforms': this.dataFormsCtrl, 
      'password': this.passwordCtrl, 
      'gender': this.genderCtrl, 
      'hobys': this.hobbiesCtrl 
    });
  }
}

为什么？

这样做你不需要使用 get 或任何东西来访问controls，你可以直接在你的模板中访问它，如下所示：

代替：

<div *ngIf="!myForm.controls.dataforms.controls.email.valid">
...
<div class="form-group" *ngFor="let h of myForm.controls.hobys.controls; let i=index">

这个：

<div *ngIf="emailCtrl.invalid">
...
<div class="form-group" *ngFor="let h of hobbiesCtrl.controls; let i=index">

Answer 2

你必须把这个FormArrayName="hobys"改成这个formArrayName="hobys"（小写）

还有这个formControlName="{{ i }}"这个[formControlName]="i"