使用* ngFor迭代包含FormGroups的FormArray

在Ionic 2中，我试图创建一个动态表单，该表单应显示一个切换按钮列表。使用* ngFor迭代包含FormGroups的FormArray

要做到这一点，我试图用一个FormArray，并且依赖于角DOC和主要基于这此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的内容

任何想法为什么？

来源

2017-06-01 Manuel RODRIGUEZ

你在实验值在这条线上行事？ 'formControlName = “{{sport.name}}”'。我敢打赌，错误在于此。 – developer033

错误依然存在，现在是“运动 - > 0 - > 0”，因为我等于索引。我需要显示控件的名称，它的名字是动态的，应该是在sport.name –

你真的很希望体育运动中的formgroups看起来像吗？我的意思是像物体是怎样的？ – Alex

我不知道/如果你可以点击获取一个动态创建的formcontrol属性名称...但你可以利用你有的列表，而你正在建立formgroups。然后，您只需将您获得的列表分配给本地变量，以便您可以在模板中使用它。

首先，如果你想使用这项运动的name，你需要改变你的创作formgroup和使用name，而不是ID：

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>

这里有一个PLUNKER

来源

2017-06-01 14:25:14 Alex

谢谢@ AJT_82，它工作完美。唯一的问题是我必须确定订单是一样的。没有理由会有所不同，但我仍然必须确定这一点，对吧？ –

绝对如此。但是我简化了Stack帖子的代码，实际上我设置了一些切换为true。我会小心的。再次感谢！ –

使用* ngFor迭代包含FormGroups的FormArray

回答

相关问题