MatCheckbox preventDefault（）和event.checked值

Posted 2021-04-17

如何实现Material复选框，以便默认情况下不会选中/取消选中（例如，在事件上调用preventDefault()）并从事件中获取checked值？

似乎我只能达到其中一个条件。使用(click)事件我无法获取复选框的值并使用(change)事件我无法阻止默认复选框值更改（我只会在基础HTTP请求成功时更改复选框值）。

Stackblitz：https://stackblitz.com/edit/matcheckbox-checked

<mat-checkbox 
  [checked]="checked"   
  (click)="onClick($event)"
>onClick me!</mat-checkbox>

<br/>

<mat-checkbox 
  [checked]="checked"
  (change)="onChange($event); false"
>onChange me!</mat-checkbox>

export class CheckboxOverviewExample {
  checked: boolean = false;

  onClick(event) {
    event.preventDefault();
    console.log('onClick event.checked ' + event.checked);
    console.log('onClick event.target.checked '+event.target.checked);
  }

  onChange(event) {
    // can't event.preventDefault();
    console.log('onChange event.checked '+event.checked);
  }
}

(click)事件打印undefined值，但成功阻止事件传播，(change)事件打印值但会传播事件。

连接问题：

• https://github.com/angular/material2/issues/1142
• https://github.com/angular/angular/issues/2042
• https://github.com/angular/material2/issues/13156

答案

如果要手动勾选复选框@ViewChild获取元素的ref，则使用checked设置值true或false，如下所示

@ViewChild('ref') ref;

  onClick(bool){
    this.ref._checked=bool;
  }

例如：https://stackblitz.com/edit/matcheckbox-checked-ybru81

事件处理时的相同示例：https://stackblitz.com/edit/matcheckbox-checked-a1le6o

另一答案

尝试不确定

校验 切换复选框的选中值，忽略不确定值。如果复选框处于不确定状态，则无论选中的值如何，该复选框都将显示为不确定复选框。

入住不确定 mat-checkbox的默认行为。当用户单击mat复选框时，始终将indeterminate设置为false。这匹配原生“input type =”复选框“”的行为

https://material.angular.io/components/checkbox/overview#-code-check-code-

另一答案

我们无法控制复选框和事件属性的默认行为。您可以创建具有已选中和未选中状态的2个图像图标，并根据值进行切换。