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

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中给你做了一个例子

希望你明白我的意思。