反转 mat-checkbox 的 "checked" 值

Question

当检查 Angular Material mat-checkbox (https://material.angular.io/components/checkbox/overview) 时，它的值为 "true"。未选中时，它的值为 "false".

有没有办法改变这种行为？我需要的恰恰相反。选中的复选框应序列化为 "false"，未选中的复选框应在调用 this.filterFormGroup.getRawValue().

时序列化为 "true"

我希望有这样的东西：

<mat-checkbox [myCustomCheckedValue]="false" [myCustomUnCheckedValue]="true"></mat-checkbox>

或者我是否需要像这样创建自定义指令：

<mat-inverted-checkbox></mat-inverted-checkbox>

我的目标是这段代码：

    this.filterGroup = new FormGroup({
        resolved: new FormControl(),
    });

    this.filterGroup.getRawValue();

returns {resolved: false} 当复选框被选中时。

Answer 1

您可以编写自定义 Pipe 以将接收到的值更改为您想要的方式。就像接收到的值是真的一样，它会以所需的方式转换值，这在您的情况下是假的。

Answer 2

Tobias，即使您没有输入，也存在 formControl。所以，如果你有

  form = new FormGroup({
    resolved: new FormControl()
  })

你可以使用类似的东西：

<mat-checkbox [checked]="!form.value.resolved"
              (change)="form.get('resolved').setValue(!$event.checked)">
   Check me!
</mat-checkbox>

参见stackblitz

请注意，如果您只有一个唯一的 formControl，则：

mycontrol=new FormControl()

你用

<mat-checkbox [checked]="!mycontrol.value"
              (change)="mycontrol.setValue(!$event.checked)">
   Check me!
</mat-checkbox>

Answer 3

如果有人想在没有 FormControl 的情况下执行此操作，最简单的解决方案是将 value 输入绑定到 checked 属性:

<mat-checkbox #checkbox [value]="!checkbox.checked">
  {{ checkbox.value }}
</mat-checkbox>

Answer 4

我使用了 https://whosebug.com/users/8558186/eliseo 的答案，并将 "false" 或 "null" 用于 API:

<mat-checkbox (change)="resolvedFormControl.setValue($event.checked ? false.toString() : null)"
    [checked]="resolvedFormControl.value === false.toString()">
            Resolved
</mat-checkbox>

在组件中：

this.resolvedFormControl = new FormControl(null);
this.resolvedFormControl.setValue(false.toString());

this.filterGroup = new FormGroup({
    resolved: this.resolvedFormControl,
});

this.filterGroup.valueChanges.subscribe(() => {
    console.log(this.filterGroup.getRawValue());
    // resolved is either 'false' or null
}

反转 mat-checkbox 的 "checked" 值

Invert "checked" value of a mat-checkbox

angular-material2

angular

angular7

angular-material-7