どのように角度でFormArrayを使用する012

Question

私は角度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、nです。 OT 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> 

ボーナス：

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

理由：先端として

、あなたは以下のように、あなたのコンポーネントであなたのcontrolsための参照を作成することができますか？

あなたがcontrolsにアクセスするためにまたは何かを得るを使用する必要はありませんこれを行う、あなただけの、以下のように、直接あなたのテンプレートでこれにアクセスすることができます。

の代わりに：

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

この：あなたはこのformArrayName = "HOでこのFormArrayName = "hobys" を変更する必要があり

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

Answer 2

bys "（小文字）

この[formControlName] =" i "のこのフォームのControlName =" {{i}} "