反转“已检查"垫复选框的值 [英] Invert "checked" value of a mat-checkbox
问题描述
当角度材料mat-checkbox
( https://material.angular.io/components/checkbox/overview )被选中,其值为"true".取消选中时,其值为"false".
When a Angular Material mat-checkbox
(https://material.angular.io/components/checkbox/overview) is checked it has the value "true". When it is unchecked it has the value "false".
有没有办法解决此问题?我只需要相反.调用this.filterFormGroup.getRawValue()
时,选中的复选框应序列化为"false",而未选中的复选框应序列化为"true".
Is there a way to turn this behaviour around? I need just the opposite. A checked checkbox should serialize to "false" and a unchecked one should serialize to "true" when calling this.filterFormGroup.getRawValue()
.
我希望有这样的东西:
<mat-checkbox [myCustomCheckedValue]="false" [myCustomUnCheckedValue]="true"></mat-checkbox>
还是我需要像这样创建一个自定义指令:
Or do I need to create a custom directive like so:
<mat-inverted-checkbox></mat-inverted-checkbox>
我的目标是该代码:
this.filterGroup = new FormGroup({
resolved: new FormControl(),
});
this.filterGroup.getRawValue();
选中该复选框后,
返回{resolved: false}
.
returns {resolved: false}
when the checkbox is checked.
推荐答案
Tobias,即使没有输入,formForm也会存在.所以,如果你有
Tobias, a formControl exists even if you don't have an input. So, if you have
form = new FormGroup({
resolved: new FormControl()
})
您可以使用以下内容:
<mat-checkbox [checked]="!form.value.resolved"
(change)="form.get('resolved').setValue(!$event.checked)">
Check me!
</mat-checkbox>
请参见 stackblitz
see in stackblitz
注意,如果只有唯一的formControl,则:
Note, if you only have a unique formControl then:
mycontrol=new FormControl()
您使用
<mat-checkbox [checked]="!mycontrol.value"
(change)="mycontrol.setValue(!$event.checked)">
Check me!
</mat-checkbox>
这篇关于反转“已检查"垫复选框的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!