倒置“选中”的垫复选框的值(Invert “checked” value of a mat-chec

当角材料mat-checkbox （ https://material.angular.io/components/checkbox/overview ）检查它的值是“真”。如果没有选中它的值是“假”。

有没有办法把这种行为在吗？我需要的正好相反。打电话时选中复选框应该序列为“假”和选中一个应该序列为“true” this.filterFormGroup.getRawValue()

我希望有这样的事情：

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

或者，我需要创建一个自定义的指令，像这样：

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

我的目标是，这个代码：

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

    this.filterGroup.getRawValue();

返回{resolved: false}当复选框被选中。

Answer 1:

托比亚斯，一个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 2:

如果有人想这样做没有FormControl，最简单的解决方案是绑定value输入到checked属性：

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

Answer 3:

我以前的答案https://stackoverflow.com/users/8558186/eliseo ，并使其“假”或“空”的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
}