我想在状态字段中附加mat-checkbox,并希望以字符串的形式获取值,就像我们用来获取Material-1一样。
我正在寻找Material-7中的ng-true-value="'ACTIVE'" ng-false-value="'INACTIVE'"
的替代方案。
答案 0 :(得分:1)
您可以通过使用value
的{{1}}属性并收听更改来实现此目的。例如:
HTML
MatCheckbox
TS
<mat-checkbox [value]="falseValue" (change)="checkboxChange($event.source, $event.checked)">
Check me!
</mat-checkbox>
您也可以将此作为指令来实现:
TS
falseValue = 'No'
trueValue = 'Yes';
checkboxChange(checkbox: MatCheckbox, checked: boolean) {
checkbox.value = checked ? this.trueValue : this.falseValue;
}
用法:
import {Directive, Input} from '@angular/core';
import {MatCheckbox} from '@angular/material/checkbox';
@Directive({
selector: 'mat-checkbox[checkboxValue]',
exportAs: 'checkboxValue'
})
export class CheckboxValueDirective {
@Input('checkboxValue') checkbox: MatCheckbox;
@Input() falseValue: string = '0';
@Input() trueValue: string = '1';
ngOnInit() {
this.checkbox.value = this.checkbox.checked ? this.trueValue : this.falseValue;
this.checkbox.registerOnChange((checked: boolean) => {
this.checkbox.value = checked ? this.trueValue : this.falseValue;
})
}
}
这是StackBlitz上的指令示例:https://stackblitz.com/edit/angular-aapsr6?file=app/checkbox-value-directive.ts
答案 1 :(得分:1)
我使用了与上面的评论类似的方法。将几个复选框的值保存在名为 filtroStatus
filtroStatus: string[] = [];
checkboxChange(checkbox: MatCheckbox, checked: boolean, statusValue: string){
if (checked) {
this.filtroStatus.push(statusValue);
statusValue === 'em_analise' ? this.filtroStatus.push('pendente') : null;
statusValue === 'em_dia' ? this.filtroStatus.push('em_andamento') : null;
} else {
const index = this.filtroStatus.indexOf(statusValue);
const total_excluir = statusValue ==='em_analise' || 'em_dia' ? 2 : 1;
index >= 0 ? this.filtroStatus.splice(index, total_excluir) : null ;
}
}
答案 2 :(得分:0)
对于寻找简单答案的人
TS:
import { Directive, Input } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { MatCheckbox } from '@angular/material/checkbox';
@Directive({
selector: 'mat-checkbox[appCheckboxValue]'
})
export class CheckboxValueDirective implements ControlValueAccessor {
@Input() trueValue = true;
@Input() falseValue = false;
constructor(@Optional() @Self() private ngControl: NgControl, private checkbox: MatCheckbox) {
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
writeValue(value: any): void {
this.checkbox.writeValue(value === this.trueValue);
}
registerOnChange(fn: any): void {
this.checkbox.registerOnChange((checked: boolean) => {
fn(checked ? this.trueValue : this.falseValue);
});
}
registerOnTouched(fn: any): void {
this.checkbox.registerOnTouched(fn);
}
setDisabledState?(isDisabled: boolean): void {
this.checkbox.setDisabledState(isDisabled);
}
}
HTML:
<mat-checkbox appCheckboxValue trueValue="ACTIVE" falseValue="INACTIVE" [(ngModel)]="myCheck">
</mat-checkbox>