mat-button-toggle 默认值 returns null 或 "" insted of value
mat-button-toggle default value returns null or "" insted of value
我正在使用 Angulars ControlValueAccessor 创建自定义表单元素。我的切换组中有三个按钮,默认情况下选择一个。当我提交而不做任何事情时,表单应该从默认字段返回值。如果我以反应形式实现它并且“”脱离模板驱动形式,则将它 returns null 设置为 null 。
如果我选择另一个值,然后选择默认选择的值,它 returns 正确的值。
HTML
<div class="nullableBoolWrapper" fxLayout="row">
<mat-button-toggle-group class="selection-button"
[disabled]="isDisabled"
(change)="changed($event)"
value=null>
<mat-button-toggle value=true>Yes</mat-button-toggle>
<mat-button-toggle value=false>No</mat-button-toggle>
<mat-button-toggle value=null [disabled]="!selectableNull">Maybe</mat-button-toggle>
</mat-button-toggle-group>
</div>
TS
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export const NULLABLE_BOOL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NullableBoolComponent),
multi: true
};
@Component({
selector: 'nullable-bool',
templateUrl: './nullable-bool.component.html',
styleUrls: ['./nullable-bool.component.scss'],
encapsulation: ViewEncapsulation.Emulated,
providers: [NULLABLE_BOOL_VALUE_ACCESSOR]
})
export class NullableBoolComponent implements ControlValueAccessor, OnInit {
constructor() { }
@Input('selectableNull') selectableNull = false;
public selectedValue: boolean | null = null;
public isDisabled = false;
private onChange: (val: boolean | null) => void;
private onTouch: () => void;
writeValue(val: boolean | null): void { this.selectedValue = val; }
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouch = fn; }
setDisabledState?(isDisabled: boolean): void { this.isDisabled = isDisabled; }
ngOnInit() { this.descriptionList === undefined ? this.descriptionList = this.defaultList : null; }
changed($event: any): void {
this.onTouch();
this.onChange($event);
}
}
问候
找到解决方案,我必须像这样初始化我的 FormControl:
private reactiveNullableBool = new FormControl({ value: null });
而不是这样:
private reactiveNullableBool = new FormControl();
但是有没有办法绕过 { value: null }
?我不喜欢这种风格。
对于模板驱动的表单,我必须做 [ngModel]="{value: null}"
才能让它工作。
也许我也应该向您发送调用该元素的组件。
我正在使用 Angulars ControlValueAccessor 创建自定义表单元素。我的切换组中有三个按钮,默认情况下选择一个。当我提交而不做任何事情时,表单应该从默认字段返回值。如果我以反应形式实现它并且“”脱离模板驱动形式,则将它 returns null 设置为 null 。
如果我选择另一个值,然后选择默认选择的值,它 returns 正确的值。
HTML
<div class="nullableBoolWrapper" fxLayout="row">
<mat-button-toggle-group class="selection-button"
[disabled]="isDisabled"
(change)="changed($event)"
value=null>
<mat-button-toggle value=true>Yes</mat-button-toggle>
<mat-button-toggle value=false>No</mat-button-toggle>
<mat-button-toggle value=null [disabled]="!selectableNull">Maybe</mat-button-toggle>
</mat-button-toggle-group>
</div>
TS
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export const NULLABLE_BOOL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NullableBoolComponent),
multi: true
};
@Component({
selector: 'nullable-bool',
templateUrl: './nullable-bool.component.html',
styleUrls: ['./nullable-bool.component.scss'],
encapsulation: ViewEncapsulation.Emulated,
providers: [NULLABLE_BOOL_VALUE_ACCESSOR]
})
export class NullableBoolComponent implements ControlValueAccessor, OnInit {
constructor() { }
@Input('selectableNull') selectableNull = false;
public selectedValue: boolean | null = null;
public isDisabled = false;
private onChange: (val: boolean | null) => void;
private onTouch: () => void;
writeValue(val: boolean | null): void { this.selectedValue = val; }
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouch = fn; }
setDisabledState?(isDisabled: boolean): void { this.isDisabled = isDisabled; }
ngOnInit() { this.descriptionList === undefined ? this.descriptionList = this.defaultList : null; }
changed($event: any): void {
this.onTouch();
this.onChange($event);
}
}
问候
找到解决方案,我必须像这样初始化我的 FormControl:
private reactiveNullableBool = new FormControl({ value: null });
而不是这样:
private reactiveNullableBool = new FormControl();
但是有没有办法绕过 { value: null }
?我不喜欢这种风格。
对于模板驱动的表单,我必须做 [ngModel]="{value: null}"
才能让它工作。
也许我也应该向您发送调用该元素的组件。