1

我正在使用 Angulars ControlValueAccesor 创建一个自定义表单元素。我的切换组中有三个按钮，默认选择一个。当我不做任何事情提交时，表单应该从默认字段返回值。如果我以反应形式实现它并且“”从模板驱动的形式中实现，它会返回 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);
  }
}

问候

4

1 回答 1

0

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

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

而不是这样：

private reactiveNullableBool = new FormControl();

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

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

于 2020-03-17T07:42:20.710 回答