mat-button-toggle 默认值 returns null 或 "" insted of value

Question

我正在使用 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);
  }
}

问候

Answer 1

找到解决方案，我必须像这样初始化我的 FormControl：

private reactiveNullableBool = new FormControl({ value: null });

而不是这样：

private reactiveNullableBool = new FormControl();

但是有没有办法绕过 { value: null }？我不喜欢这种风格。对于模板驱动的表单，我必须做 [ngModel]="{value: null}" 才能让它工作。

也许我也应该向您发送调用该元素的组件。

mat-button-toggle 默认值 returns null 或 "" insted of value

mat-button-toggle default value returns null or "" insted of value

angular

angular-material

angular8

controlvalueaccessor