Ionic & reaktiven Formen & Ionen Liste

Question

I unter Verwendung dieser Code eine reaktive Form mit der Form Array gemacht haben:

constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    public formProvider: FormsProvider, 
    public fieldsProvider: FieldsProvider, 
    public submissionsProvider: SubmissionsProvider, 
    public formBuilder: FormBuilder 
) { 
    this.submissionForm = this.formBuilder.group({ 
     fieldList: this.formBuilder.array([]) 
    }); 
    } 

    getFormDetail(formId: string): void { 

    this.fieldsProvider.getFormFieldsRef(formId).on('child_added', formFieldSnap => { 
     // get the forms reference based on the keys returned from our users forms reference 
     // then push into our form list array - voila! 
     this.fieldsProvider.getFieldListRef().child(formFieldSnap.key).on("value", fieldsSn => { 

     (<FormArray>this.submissionForm.controls['fieldList']).push(
      new FormGroup({ 
      id: new FormControl(fieldsSn.key), 
      name: new FormControl(fieldsSn.val().name, Validators.required), 
      frequency: new FormControl(fieldsSn.val().frequency, Validators.required), 
      completed: new FormControl(false) 
      }) 
     ); 

     }); 
    }); 
    } 

I dann ist dies die folgenden Vorlage auf dem Frontend Render:

<form [formGroup]="submissionForm"> 
    <ion-list formArrayName="fieldList"> 
     <ion-item *ngFor="let item of submissionForm.controls['fieldList'].controls; let i = index;" [formGroup]="item"> 
      <ion-label>Field name: {{name}} - Field frequency: {{frequency}}</ion-label> 
      <ion-checkbox color="dark" checked="false" formControlName="completed"></ion-checkbox> 
     </ion-item> 
    </ion-list> 
    </form> 

Dies macht die Liste richtig, aber ich kann nicht die Eigenschaften der Liste zugreifen scheinen, um das Etikett zu erstellen, beispielsweise diesen Teil:

{{name}}

Renders nichts

Answer 1

Ok, damit ich dies herausgefunden, Sie nicht die regelmäßige Vorlage Bindungen in diesem Fall benutzen können, aber es ist eine Arbeit um:

<form [formGroup]="submissionForm"> 
    <ion-list formArrayName="fieldList"> 
     <ion-item *ngFor="let item of submissionForm.controls['fieldList'].controls; let i = index;" [formGroup]="item"> 
      <ion-label>Field name: {{item.get("name").value}} - Field frequency: {{item.get("frequency").value}}</ion-label> 
      <ion-checkbox color="dark" checked="false" formControlName="completed"></ion-checkbox> 
     </ion-item> 
    </ion-list> 
    </form>