Mat-checkbox [checked]="false" 不起作用

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.

Answer 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.

Answer 2

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