Question

我的视图页面上有多个复选框，我想在表单提交上访问这些选定的值。我怎样才能访问它？我在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>

Answer 1

首先，您不应该在复选框中使用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);
  }
}

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

1 个答案:

Demo