Angular 7 mat-checkbox 未使用反应形式进行检查答案

【问题标题】：Angular 7 mat-checkbox not being checked with reactive formsAngular 7 mat-checkbox 未使用反应形式进行检查
【发布时间】：2019-08-24 21:47:32
【问题描述】：

我正在使用带有反应形式的 Angular7 mat-checkbox。下面是代码。

shared: FormGroup;
 constructor(private router: Router, fb: FormBuilder,private filterServices:FilterServices) {
        this.shared = fb.group({
            "byAll": false,
            "byFriends": false,
            "byPeers": false,
            "byExperts": false,
            "bySpecificFriends": false,
            "byNone":false,
            "permissionType":"share",
            "emails": []
        });
}

在 nginit 函数上，我从 db 获取数据，如下所示

  ngOnInit(){
       this.filterServices.getFilters(12).subscribe((res)=>{
        console.log(res);
        this.setFormvalues(res);
       }) 
    }
setFormvalues(response:any){
     response.forEach(element => {

             this.sharedEmails = [];
             this.sharedEmails = element['emails'].split(',');
             this.shared.value['byAll'] = element["byAll"]
             this.shared.value['byExperts'] = element['byExperts']
             this.shared.value['byFriends'] = element['byFriends']
             this.shared.value['byNone'] = element['byNone']
             this.shared.value['byPeers'] = element['byPeers']
             this.shared.value['bySpecificFriends'] = element['bySpecificFriends']
             console.log(this.shared)
       })
}

我可以将数据设置为共享对象中的属性，但未选中 html 中的复选框。假设 shared['byAll'] 最初为 false（复选框最初未选中），但在从服务调用获取数据后，现在其值为 true。但是在 html 中它没有得到反映，我的意思是复选框没有被选中。我在某个地方出错了吗？

下面是html代码。

<form [formGroup]="shared">
                        <div fxLayout="row" fxLayoutGap="20px">
                            <mat-checkbox formControlName="byAll">All</mat-checkbox>
</div>
</form>

【问题讨论】：

您正在循环访问响应并一次又一次地覆盖表单值。另外，我不认为以这种方式为表单设置值会起作用，直接在表单组上调用setValue()（因为控件名称和数据键相同）或setValue()单独调用表单控件

标签： angular

【解决方案1】：

我找到了解决方案！

如果我们只更新几个值，我们可以使用patchValue，否则如果我们想更新表单组中的所有值，则使用setValue。

补丁值格式

this.shared.patchValue({
"key":"value"
})

【讨论】：

【解决方案2】：

试试这个

this.shared.value['byAll'].setValue(element["byAll"]);

【讨论】：