访问表单上的复选框值提交离子2

时间:2017-05-19 06:21:57

标签: angular ionic-framework ionic2

我的视图页面上有多个复选框,我想在表单提交上访问这些选定的值。我怎样才能访问它?我在SO上看过,我们可以使用更改事件访问复选框,但它对我不起作用。以下是我的代码。

注意:我正在使用模型驱动方法(Form Builder),如果可能的话,我希望以模型驱动的方式看答案。

<ion-row>
<ion-col col-sm-6 col-md-6 col-lg-3 col-xl-4 *ngFor="let location of company_data.data.locations; let i=index" [hidden]="location.location_id == location_id_Ref.value">
  <ion-item>
    <ion-label>{{location.location_name}}</ion-label>
    <ion-checkbox value="{{location.location_id}}" (click)="updateCheckedOptions(location, $event)" formControlName="worksites"></ion-checkbox>
  </ion-item>
</ion-col>
</ion-row>

1 个答案:

答案 0 :(得分:2)

首先,您不应该在复选框中使用formControlName,而是想像使用Arun提供的链接中所建议的那样使用formArray。我们只是声明一个空的formArray,我们将location推送或删除。

this.myForm = this.fb.group({
  worksites: this.fb.array([])
})

然后您的模板我们对其他示例做了一些细微更改,我们将(change)换成(ionChange)代替:

<ion-item>
  <ion-label>{{location.location_name}}</ion-label>
  <ion-checkbox (ionChange)="updateCheckedOptions(location, $event.checked)"></ion-checkbox>
</ion-item>

updateCheckedOptions功能:

updateCheckedOptions(location:Object, isChecked: boolean) {
  const worksites = <FormArray>this.myForm.controls.worksites;
  // if target checked, push to formarray, else remove
  if(isChecked) {
    worksites.push(new FormControl(location));
  } else {
      let index = worksites.controls.findIndex(x => x.value.location_id == location.location_id);
      worksites.removeAt(index);
  }
}

Demo