使用* 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

回答

相關問題