如何在angular 2.4中使用FormArray

我使用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);
    }
}

---

问题是它是

formarayname

，而不是

formarayname

：

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

为什么？

执行此操作时，您不需要使用get或任何东西来访问

控件

，您只需在模板中直接访问即可，如下所示：

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

而不是：

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

...

这：

...

您必须在此

formarayname=“hobys”

中更改此

formarayname=“hobys”

（小写）

---

而这个

formControlName=“{i}}”

在这个

[formControlName]=“i”

中，你的第一点是正确的，而第二点不是

formControlName=“{i}}”

适用于我的案例。

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

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