javascript – 将数据绑定到角度复选框

我设法在UI上正确绑定this.empDetails.services中的数据,正确选中了复选框,并列出了所有复选框选项.

但是,当我单击更新而没有对复选框进行任何更改时,数据不会被推送到serviceFormArray,this.updateServicesForm.value为空.

我必须取消选中那些选中的复选框,然后再次检查它以便它将推送到formarray.

我尝试了一些更改,但无济于事,有人可以建议将所需的正确代码存档到底是什么吗？非常感谢.
HTML

<form action="javascript:" [formGroup]="updateSvcForm">
  <div class="row" *ngFor="let service of servicesOptions; let i=index">
    <div class="col-sm-12">
      <div class="checkBox-color checkBox-primary">
        <input type="checkBox" id={{service.value}} [value]="service.value" (change)="onCheckChange($event)" [checked]=isSelected(service.value)>
        <label for={{service.value}}>
          {{service.description}}
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2"></label>
    <div class="col-sm-10">
      <button class="btn btn-primary m-b-0 ripple light" (click)="updateServices()">Update</button>
    </div>
  </div>
</form>

Component.TS

sservicesOptions = [
  { description: '1. Sweeping', value: 'sweeping' },
  { description: '2. Mopping', value: 'mopping' },
  { description: '3. Windows', value: 'windows' },
  { description: '4. Washing Clothes', value: 'washingclothes' },
];


this.updateSvcForm= this.fb.group({
  sservices: new FormArray([]),
});

onCheckChange(event) {
  const sservicesFormArray: FormArray =
    this.updateSvcForm.get('sservices') as FormArray;


  if (event.target.checked) {
    sservicesFormArray.push(new FormControl(event.target.value));
  }
  else {
    let i: number = 0;
    sservicesFormArray.controls.forEach((ctrl: FormControl) => {
      if (ctrl.value == event.target.value) {
        sservicesFormArray.removeAt(i);
        return;
      }
      i++;
    });
  }
}

isSelected(sserviceOption) {
  return this.empDetails.services.indexOf(serviceOption) >= 0;
}
    console.log(this.updateSvcForm.value);
  }

来自this.empDetails.services API的数据返回

sservices: Array(2)
0: "mopping"
1: "washingclothes"
length: 2
__proto__: Array(0)

解决方法:

原因是,您使用选中标记应选中哪个复选框,它们与表单数组无关,因此如果您不触摸复选框,则formarray将正确为空.

我可以提出几个选项来解决这个问题……还有以下变化：

更改功能可以更改为：

onCheckChange(event) {
  if (event.target.checked) {
    this.ssArray.push(this.fb.control(event.target.value));
  }
  else {
   this.ssArray.removeAt(this.ssArray.value.findindex(x => x === event.target.value))
  }
}

不管你怎么做,你的方式也一样:)我也喜欢使用FormBuilder(这里注入为fb).

在这种情况下我喜欢使用getter：

get ssArray() {
  return this.updateSvcForm.get('sservices') as FormArray;
}

我能想到的选择：

>将checked属性添加到数组sservicesOptions中的对象
>保留isSelected函数,但最初将所选选项添加到formarray

我最喜欢选项1,因此将checked属性添加到对象：

servicesOptions = [
  { description: '1. Sweeping', value: 'sweeping', checked: false },
  { description: '2. Mopping', value: 'mopping', checked: false },
  { description: '3. Windows', value: 'windows', checked: false },
  { description: '4. Washing Clothes', value: 'washingclothes', checked: false },
];

然后,在构建表单时,更改应预先选择的状态的已检查状态,并将应检查的值添加到表单数组：

constructor(private fb: FormBuilder) {
  this.updateSvcForm = this.fb.group({
    sservices: this.fb.array([]),
  });
  // change the checked status for the checkBoxes that should be checked
  this.servicesOptions.map(x => 
    this.empDetails.services.indexOf(x) >= 0 ? x.checked = true : x.checked = false)
  // initially set the selected form controls to the formarray
  this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))
}

然后,您可以在模板中添加[checked] =“service.checked”.

DEMO

选项2：

保持您所检查的功能,只需记住将预选值添加到您的formarray中.我真的不喜欢这个选项,因为例如,我们最终在模板中调用一个函数,这是不推荐的.但无论如何,保持代码与现在一样,只需将初始值添加到formarray：

this.updateSvcForm = this.fb.group({
  sservices: this.fb.array([]),
});
// add the intial values to the formarray:
this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))

DEMO

我在函数中添加了一个console.log来显示它是如何被调用的.这样的演示是可以的,但如果你有一个大的形式,我真的会提醒你使用这个解决方案.

将第三个选项,实际设置所有值到您的表单数组,然后只是切换复选框的布尔值,但这将需要一些代码的重构,我不知道你是否想要.但也有这个选择.

javascript – 将数据绑定到角度复选框

相关推荐