Значение по умолчанию для mat-button-toggle возвращает значение null или "" вместо значения

Question

Я создаю пользовательский элемент формы, используя Angulars ControlValueAccesor. В моей группе переключателей три кнопки, одна из которых выбрана по умолчанию. Когда я отправляю ничего не делая, форма должна возвращать значение из поля по умолчанию. Insted возвращает NULL, если я реализую его в реактивной форме и "" из формы, управляемой шаблоном.
Если я выбираю другое значение, а затем выбранное по умолчанию, оно возвращает правильное значение.

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}", чтобы все заработало.

Возможно, мне следовало бы отправить вам компонент, который также вызывает элемент.