Mat-checkbox [checked]=“false” does not work

Question

Trying to implement a checkbox where I can dynamically set the value (and have it appear in the box).

HTML

<mat-checkbox *ngIf="isReply()" class="col-2" formControlName="checkbox" [checked]="false"  >CheckBox off</mat-checkbox> 
<mat-checkbox *ngIf="!isReply()" class="col-2" formControlName="checkbox"  >CheckBox</mat-checkbox>

materials.module.ts

addCheckbox() {
      this.checkboxForm = this.fb.group({
        'CheckBox':true,

main.module.ts

isReply(): boolean { 
  return: true;
}

There is a radio button that toggles isReply() off and on.

When I toggle isReply() on, I can see the CheckBox label change from "CheckBox" to "CheckBox off" but the checkbox status (visibly) does not change.

I can apply other logic which responds to the checkbox being off, even though the checkbox is still visibly checked (true). This changes the value of the checkbox to false, even though the checkbox is still visibly checked (true).

When I click on the checkbox (clear the visible box) the value toggles and the response is as expected, the value of checkbox is now true, even though the box is not checked.

I have made the following changes which STILL do not work

adjust this to: 

<div class="row" *ngIf="isReply()">
 <mat-checkbox class="col-2" formControlName="checkBox" >CheckBox</mat-checkbox> 
</div>
<div class="row" *ngIf="!isReply()">
 <mat-checkbox class="col-2" [checked]='true' 
         formControlName="checkBox" >CheckBox</mat-checkbox>
</div>

In the ts:

addCheckbox() {
      this.checkboxForm = this.fb.group({
        'checkBox':false,

I have two radio buttons (standard & reply).

The html for the radio buttons:

<form [formGroup]="materials.SignatureType">
  <mat-radio-group formControlName="sigtype" >Signature Type: &nbsp;
  <label><input type="radio" value="standard" formControlName="sigtype">
  <span>&nbsp;Standard</span>
  </label>
<label><input type="radio" value="reply" (click)="setBoxes()" formControlName="sigtype" >
 <span>&nbsp;Reply</span>
 </label>
</mat-radio-group>

The code for setBoxes():

if (this.isReply) {
      this.materials.checkboxForm.value.checkBox = false;
    }
    else {
      this.materials.checkboxForm.value.checkBox = true;
    }

The click on "reply" radio button changes the value for the checkBox but does not change the state of the button.

I can not get the button state to change OTHER THAN to click on the checkbox.

Using Angular 7.2.3 [(ngModel)] is deprecated.

I am trying to find a way to set the checkbox value to false. Open to suggestions. — Chip
You have to use setValue or patchValue to set value of input control. Check this: angular.io/guide/reactive-forms#patching-the-model-value — Chellappan வ
I tried to implement the following: <mat-checkbox *ngIf="!isReply()" class="col-2" formControlName="checkBox" [checked]="setValue('checkBox', true)" > <mat-checkbox *ngIf="isReply()" class="col-2" formControlName="checkBox" [checked]="setValue('checkBox', false" > with the added function of: setValue(checkBox: string, value: boolean) { let status; ... logic to process checkBox and value ... console.log(checkBox + " status: "); console.log(status); } Still no joy — Chip
setting the status like this doesn't work: this.materials.checkboxForm.value.checkBox.setValue(true); — Chip

Daniel Alejandro Lima Monzon Daniel Alejandro Lima Monzon · Accepted Answer · 2020-01-10T19:57:03

try: In your component.html <div class="container-fluid p-5 mt-2 mb-2" > <mat-checkbox class="col-2" [checked]="var1" >CheckBox off</mat-checkbox> <mat-checkbox class="col-2" [checked]="var2" >CheckBox</mat-checkbox> </div>

In your component.ts file var1 = false; var2 = true

You just need binding checked property then you can change the value of var1 and var2 in your logic.

Mat-checkbox [checked]=“false” does not work

2 Answers