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, Jan 10 '20 at 20:04
You have to use setValue or patchValue to set value of input control. Check this: https://angular.io/guide/reactive-forms#patching-the-model-value — Chellappan வ, Jan 10 '20 at 20:07
I tried to implement the following: ` ` 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, Jan 10 '20 at 20:35
setting the status like this doesn't work: `this.materials.checkboxForm.value.checkBox.setValue(true);` — Chip, Jan 10 '20 at 20:39
I get the following error: `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.` — Chip, Jan 10 '20 at 20:54
Chip, if use formControlName NOT use [checked]. Your'e using formControlName, [checked] and isReply() for a unique variable. Has no sense — Eliseo, Jan 11 '20 at 10:42

Daniel Alejandro Lima Monzon · Answer 1 · 2020-01-10T20:30:02.840

-1

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.

edited Jan 10 '20 at 20:30

answered Jan 10 '20 at 19:57

Daniel Alejandro Lima Monzon

29
3

Does work. After adding the suggestion, if I put the following into isReply() console.log("CheckBox status: "); console.log(this.materials.checkboxForm.value.CheckBox); I get the following response: CheckBox status: main.component.ts:250 ƒ Boolean() { [native code] } – Chip Jan 10 '20 at 20:19
I've updated my answer , let me know if works for you. – Daniel Alejandro Lima Monzon Jan 10 '20 at 20:30
Not sure what you mean by binding checked property: In materials.module.ts `addCheckbox() { this.checkboxForm = this.fb.group({ 'checkBox': Boolean,` I can set checkBox to true of false and determine the status of the box on load, but I can't change the status of the box through user interaction (other than clicking on the box). – Chip Jan 10 '20 at 20:42
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. – Daniel Alejandro Lima Monzon Jan 10 '20 at 21:28
I am NOT seeing the synchronization of data to view. Edited the initial example and still no joy. – Chip Jan 15 '20 at 16:16

score -1 · Answer 2 · answered Aug 06 '20 at 15:16

I was having this issue with my project.

I had my checkboxes wired up with the [checked]=... but I had missions getting it to work as expected. Which was to show non selected items as opacity: 40%; and have the box ticked next to the selected item.

eg. sometimes there would be a checked box and no selected items, or multiple checked boxes, or a selected item and no checked box... Very strange.

My conclusion; it's being set programatically and being over ridden by the click action.

TLDR;

My solution; change the click action configuration in the module providers by specifying:

MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'

this will leave any click actions in your hands for developer implementation.

Check the docs for more deets -> https://v6.material.angular.io/components/checkbox/overview

`MAT_CHECKBOX_CLICK_ACTION` is deprecated. Please use `MAT_CHECKBOX_DEFAULT_OPTIONS` as per documentation available at https://material.angular.io/components/checkbox/overview — ShortM, Dec 09 '20 at 03:50

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

2 Answers2