How to mat-button-toggle by default selected in angular 8 using ControlValueAccessor
我正在尝试使用 Angulars ControlValueAccessor 创建自定义元素。目标是一个具有三种状态的开关,真、假和空。默认情况下应该选择 Null,我尝试了其他帖子的一些解决方案,但它们没有奏效。
我尝试在 mat-button-toggle-group 中添加 "value=null",并在 null mat-button-toggle 本身中添加 "checked" 属性。
HTML:
1 2 3 4 5 6 7 8 9 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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); } } |
解决方案:
1 2 3 4 5 6 7 8 | <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> |
就我而言,我必须删除 ngModel。
你好
所以我做了一些研究,问题是 [value]="null" 会将 null 分配给 value 属性,这与如果您有 value=null 然后它分配"null"而不是 null 不同。
并且"null"不等于null,所以它不会被选中。
它有两个解决方案。
我在stackblitz中给你做了一个例子
希望你明白我的意思。