如何使用ControlValueAccessor在角度8中默认选择垫按钮切换

Question

我正在尝试使用Angulars ControlValueAccessor创建一个自定义元素。目标是一个具有三种状态的开关，true、false和null。默认情况下应该选择Null，我尝试了其他帖子中的一些解决方案，但都不起作用
我尝试在垫子按钮切换组中添加"value=null"，并在null垫子按钮切换本身中添加"checked"属性。

HTML:

<div class="nullableBoolWrapper" fxLayout="row">
<mat-label class="centred-vertically">{{ label }}</mat-label>
<mat-button-toggle-group class="selection-button"
[disabled]="isDisabled"
[(ngModel)]="selectedValue"
(change)="changed($event)">
<mat-button-toggle ngDefaultControl value=true>{{ descriptionList[0].description }}</mat-button-toggle>
<mat-button-toggle ngDefaultControl value=false>{{ descriptionList[1].description }}</mat-button-toggle>
<mat-button-toggle ngDefaultControl value=null [disabled]="!selectableNull">{{ descriptionList[2].description }}</mat-button-toggle>
</mat-button-toggle-group>

TS:

import { Description } from './../core/models/description';
import { Component, ViewEncapsulation, 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'],
providers: [NULLABLE_BOOL_VALUE_ACCESSOR]
})
export class NullableBoolComponent implements ControlValueAccessor, OnInit {
constructor() { }
@Input('descriptionList') descriptionList: Description[];
@Input('selectableNull') selectableNull = false;
@Input('label') label: string;
public selectedValue: boolean | null = null;
public isDisabled = false;
private defaultList: Description[] = [{ description: 'Yes' }, { description: 'No' }, { description: 'Not set' }];
private onChange: any = () => {};
private onTouch: any = () => {};
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);
}
}

解决方案：

<div class="nullableBoolWrapper" fxLayout="row">
<mat-label class="centred-vertically">{{ label }}</mat-label>
<mat-button-toggle-group class="selection-button"
[disabled]="isDisabled"
(change)="changed($event)" #gro="matButtonToggleGroup" value="null">
<mat-button-toggle ngDefaultControl [value]="true">{{ descriptionList[0].description }}</mat-button-toggle>
<mat-button-toggle ngDefaultControl [value]="false">{{ descriptionList[1].description }}</mat-button-toggle>
<mat-button-toggle ngDefaultControl value="null" [disabled]="!selectableNull">{{ descriptionList[2].description }}</mat-button-toggle>
</mat-button-toggle-group>
</div>

在我的情况下，我不得不删除ngModel。

问候

Answer 1

所以我做了一些研究，问题是[value]="null"会将null分配给value属性，而不是如果你有value=null，那么它会分配"null"而不是null。

并且"null"不等于null，所以它不会被选中。

它有两种解决方案。

我给你举了一个stackblitz 的例子

希望你能理解我的意思。