Значение по умолчанию mat-button-toggle возвращает ноль или значение без значения

Я создаю настраиваемый элемент формы с помощью 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);
  }
}

Приветствие


person KastenBrot    schedule 16.03.2020    source источник
comment
Поделитесь ссылкой на stackblitz или plnkr.   -  person Ravinder Kumar    schedule 16.03.2020


Ответы (1)


Нашел решение, мне пришлось инициализировать свой FormControl следующим образом:

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

а не так:

private reactiveNullableBool = new FormControl();

Но есть ли способ обойти { value: null }? Мне не нравится стиль. А для форм на основе шаблонов мне пришлось сделать [ngModel]="{value: null}", чтобы заставить их работать.

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

person KastenBrot    schedule 17.03.2020