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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 将数据绑定到角度复选框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4115字，纯文字阅读大概需要6分钟。

内容图文

我设法在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 – 将数据绑定到角度复选框全部内容，希望文章能够帮你解决javascript – 将数据绑定到角度复选框所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端