Question

您好我正在设计具有多个值的checbox，但是当我点击一个时复选框，它选择所有

 <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>

Answer 1

使用[checked]代替[（ngModel）]

<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}}" 
                       [checked]="userInfo.objective"/> {{objective.value}}
                </label> 
         </div>
</div>

Answer 2

由于您使用的是反应形式，请使用它。不建议将ngModel与反应形式一起使用。在ReactiveFormsModule中，甚至不包括ngModel指令。

由于您有多个复选框，因此应使用FormArray来捕获值。我们可以调用FormArray objectiveOfUtilisingServiceControls。

然后我们有一个方法来添加或删除表单数组中的项目。我们在模板中有一个更改事件，我们在其中传递复选框的布尔值，意味着是否选中它，以及我们要添加到表单数组的实际项目：

(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推送到表单数组，要么取消选中它，我们会从表单数组中删除表单控件。

由于您有一些预先检查的值，我们还需要在表单数组中初始添加一个值。我们可以在构建表单后执行此操作，如下所示:( fb表示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]：

<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更改为您拥有的实际表单名称。

点击一个复选框选择所有为什么？

2 个答案: