簡體   English   中英

Angular 7 mat-checkbox未使用反應形式進行檢查

[英]Angular 7 mat-checkbox not being checked with reactive forms

我正在使用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中的復選框。 假設共享['byAll']最初為false(最初未選中復選框),但在從服務調用獲取數據后,其值為true。 但是在html中沒有得到反映,我的意思是復選框沒有得到檢查。 我在哪里錯了?

下面是html代碼。

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

嘗試這個

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

我得到了解決方案!

如果我們只更新幾個值,我們可以使用patchValue,否則如果我們想更新表單組中的所有值,則使用setValue。

補丁值格式

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM