Question

我使用此代码使用Form Array制作了一个反应形式：

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

      });
    });
  }

然后我使用以下模板在前端渲染：

  <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>

这会正确呈现列表，但我似乎无法访问列表的属性来创建标签，例如这部分：

什么都不做

Answer 1

好的，所以我想出来了，在这种情况下你不能使用常规的模板绑定，但有一个解决方法：

 <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>

离子和反应形式＆amp;离子列表

1 个答案: