时间戳

首页 > 解决方案 > 将逗号分隔列表绑定到Angular 9中的复选框

arrays - 将逗号分隔列表绑定到Angular 9中的复选框

问题描述

在我的反应形式中，我有一个数组，我使用以下语法将复选框列表绑定到：数组结构是 {id:number, name:string}

TS

ngOnInit(): void {
 this.initFCForm();
 this.addCheckboxes();
}

initFCForm(): void {
this.fcForm = this.formBuilder.group({
  frequency : new FormControl('', [Validators.required]),
  rules: new FormArray([])
});
}

get rulesFormArray() {
  return this.fcForm.controls.rules as FormArray;
}
private addCheckboxes() {
  this.businessrules.forEach(() => this.rulesFormArray.push(new FormControl(false)));
}

HTML

 <label class="col-md-7" formArrayName="rules" 
         *ngFor="let rule of rulesFormArray.controls; let i = index">
               <input type="checkbox" [formControlName]="i">
                                    {{businessrules[i].name}}
  </label>

现在我需要在页面加载时填充它以选择第一个和第三个选项。我尝试了以下代码，但它只选择了前两个选项。

TS

this.fc.rules.patchValue([1,3])

标签： arraysangulartypescriptangular-reactive-forms

解决方案

当您执行 this.fc.rules.patchValue([1,3]) 时，它会将值 1 设置为规则 FormArray 的第一个控件，并将 3 设置为规则 FormArray 的第二个控件，但不会设置为第三个控件。

复选框 formcontrol 需要一个布尔值（真或假），在这里，当使用补丁设置 1 和 3 时，值会自动“转换”为真，因为这些是真实值。

如果要填充第一个和第三个值，请尝试以下操作：

this.fc.rules.patchValue([true,null, true])

推荐阅读