* ngForのFormGroupsを含むFormArrayを繰り返す

Question

Ionic 2では、トグルボタンのリストを表示する動的フォームを作成しようとしています。

はので、私はFormArrayを使用しようとしていますやると角ドキュメントに、主にこれに基づき、このpost

に頼っていたために、私は次の

<form *ngIf="accountForm" [formGroup]="accountForm"> 

    <ion-list> 

     <!-- Personal info --> 
     <ion-list-header padding-top> 
     Informations personnelles 
     </ion-list-header> 
     <ion-item> 
     <ion-label stacked>Prénom</ion-label> 
     <ion-input formControlName="firstname" [value]="(user | async)?.info.firstname" type="text"></ion-input> 
     </ion-item> 

     <!-- Sport info --> 
     <ion-list-header padding-top> 
     Mes préférences sportives 
     </ion-list-header> 
     <ion-list formArrayName="sports"> 

     <ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i"> 
      <ion-label>{{sport.name | hashtag}}</ion-label> 
      <ion-toggle formControlName="{{sport.name}}"></ion-toggle> 
     </ion-item> 

     </ion-list> 

    </ion-list> 


    </form> 

コントローラを実装

ionViewDidLoad() { 
    console.log('MyAccountPage#ionViewDidLoad'); 

    // Retrieve the whole sport list 
    this.sportList$ = this.dbService.getSportList(); 
    this.sportList$.subscribe(list => { 

     // Build form 
     let sportFormArr: FormArray = new FormArray([]); 

     for (let i=0; i < list.length; i++) { 
     let fg = new FormGroup({}); 
     fg.addControl(list[i].id, new FormControl(false)); 
     sportFormArr.push(fg); 
     } 

     this.accountForm = this.formBuilder.group({ 
     firstname: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
     lastname: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
     company: [''], 
     sports: sportFormArr 
     }); 

     console.log('form ', this.accountForm); 
    }) 

    } 

次のエラーが発生します。

ERROR Error: Cannot find control with path: 'sports -> 0 -> ' 

ここにはaccountFormの内容があります

何故でしょうか？

Answer 1

動的に作成されたformcontrolのプロパティ名を取得する方法を教えてください。ただし、フォームグループを作成する代わりに、リストを利用できます。次に、取得しているリストをローカル変数に代入するだけで、テンプレート内で使用できるようになります。

まず第一に、あなたがスポーツのnameを使用したい場合は、あなたがあなたの創造formgroupを変更して、IDの代わりにnameを使用する必要があります言ったよう

fg.addControl(this.list[i].name, new FormControl(false)); 

はその後、あなたがリストを利用することができますし、そのテンプレートのインデックス、：

<ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i"> 
    <ion-label>{{list[i].name}}</ion-label> 
    <ion-toggle formControlName="{{list[i].name}}"></ion-toggle> 
</ion-item> 

は、ここでは、EXP何ですかPLUNKER