单击时，一个复选框将全部选中为什么? [英] On click one checkbox selects all Why?

问题描述

我正在设计具有多个值的checbox，但是当我单击一个时 复选框，它会全选

Hi i'm designing checbox with multiple values but when i click one checkbox it selects all

 <div [ngClass] = "{'form-group': true}">
              <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label>
             <div>
                <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService">
                <input type="checkbox" 
                       name="objective"
                       formControlName = "objectiveOfUtilisingServiceControl"
                       value="{{objective.value}}" 
                       [(ngModel)]="userInfo.objective"/> {{objective.value}}
                </label> 
              </div>
            </div>

推荐答案

由于您使用的是反应形式，因此请利用它.不建议将ngModel与反应形式一起使用.在ReactiveFormsModule中甚至没有包含ngModel指令.

Since you are using a reactive form, utilize it. It is discouraged to use ngModel with a reactive form. In the ReactiveFormsModule the ngModel directive is not even included.

由于具有多个复选框，因此应使用FormArray捕获值.我们可以称它为FormArray objectiveOfUtilisingServiceControls.

Since you have several checkboxes, you should use a FormArray to capture the values. We could call that FormArray objectiveOfUtilisingServiceControls.

然后，我们有了一种向表单数组添加或删除项目的方法.我们在模板中有一个change事件，在其中我们传递复选框的布尔值(表示是否选中该复选框)以及要添加到表单数组中的实际项目:

Then we have a method for the adding or removing of the items to the form array. We have a change event in the template, in which we pass the boolean of the checkbox, meaning if it's checked or not, as well as the actual item we want to add to the form array:

(change)="onChange(objective.value, $event.target.checked)"

onChange方法如下所示:

onChange(value:string, isChecked: boolean) {
  let objectiveOfUtilisingServiceControls = 
               <FormArray>this.myForm.controls.objectiveOfUtilisingServiceControls;

  if(isChecked) {
    objectiveOfUtilisingServiceControls.push(new FormControl(value));
  } else {
    let index = 
      objectiveOfUtilisingServiceControls.controls.findIndex(x => x.value == value)
    objectiveOfUtilisingServiceControls.removeAt(index);
  }
}

在我们将新的FormControl推送到表单数组的地方，或者如果未选中它，则从表单数组中删除表单控件.

Where we either push a new FormControl to the form array, or if it's unchecked we remove the form control from the form array.

由于您已经预先检查了一些值，因此我们还需要首先在表单数组中添加该值.我们可以在构建表单后执行以下操作:(fb指的是Formbuilder)

Since you have some value that is prechecked, we also need to initially add that one in the form array. We can do it after we have built the form, which can look like this: (fb is referring to Formbuilder)

ngOnInit() {
  // build form
  this.myForm = this.fb.group({
    objectiveOfUtilisingServiceControls: this.fb.array([])
  });

//iterate and check which object matches the with the value in 'userInfo.objective'
for (let obj of this.initialInformationDetails.objectiveOfUtilisingService) {
    if (obj.value == this.userInfo.objective) {
      this.onChange(obj.value, true)
      break;
    }
  }
}  

对于模板中的预检查值，只需使用[checked]:

And as for the prechecked value in the template, just use [checked]:

<label *ngFor="let objective of initialInformationDetails.objectiveOfUtilisingService">
  <input type="checkbox" (change)="onChange(objective.value, $event.target.checked)"
        [checked]="userInfo.objective == objective.value"/> {{objective.value}}
</label> 

提交表单时，在myForm.value中具有该表单的所有值，只需将myForm更改为您拥有的实际表单名称即可.

and when you submit the form, you have all values of the form in myForm.value, just change myForm to the actual form name you have.

这篇关于单击时，一个复选框将全部选中为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！