带有 ControlValueAccessor 和 formControlName 的 Angular Material Datepicker

Question

我正在尝试将 ControlValueAccessor 与 Angular Material datepicker 一起使用。出于某种原因，它不适用于 formControlName 和反应式表单。有人可以解决这个问题吗？正在为某些样式和属性构建包装器。值被发送到反应形式等

https://material.angular.io/components/datepicker/overview

打字稿：

import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ], host: {
    '(change)': 'onChange($event)',
    '(blur)': 'onTouch()'
  }
})

export class DatePickerComponent implements OnInit {
  @Input() Value: Date = new Date();
  @Input() PlaceHolder: string;
  @Input() Label:string;
  @Output() dateValueAction = new EventEmitter();

  onChange: any = () => { };
  onTouch: any = () => { };
  constructor() { }

  ngOnInit() {
  }

  set valueUpdated(val) {
    this.Value = val;
    this.onChange(val);
    this.onTouch(val);
  }

  writeValue(obj: any): void {
    this.Value = obj;
    this.valueUpdated = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }

  dateValueChanged() {
    this.valueUpdated = this.Value;
    this.dateValueAction.emit(this.Value);
  }
}

HTML：

<mat-form-field appearance="outline">
    <mat-label>{{Label}}</mat-label>   
    <input matInput [matDatepicker]="picker" placeholder={{PlaceHolder}} [(value)]="Value" (dateChange)="dateValueChanged()">
    <mat-datepicker-toggle matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

想用formControlName等实现

<app-date-picker formControlName="startDate">

Answer 1

实现ControlValueAccessor你不应该使用标准的输入/输出通信机制。
输入值由 提供writeValue，通知控件的变化形式（输出值）是通过调用 提供的回调函数来完成的registerOnChange。

请尝试以下代码：

export class DatePickerComponent implements ControlValueAccessor {
  private value: Date = new Date();
  @Input() placeHolder: string;
  @Input() label: string;

  private onChange: Function;
  private onTouch: Function;

  writeValue(obj: Date): void {
    this.value = obj;
  }
  registerOnChange(fn: Function): void {
  this.onChange = fn;
  }
  registerOnTouched(fn: Function): void {
    this.onTouch = fn;
  }
  dateValueChanged(): void {
    this.onChange(this.value)
  }
}

另一点是您直接在组件装饰器描述符中指定了类。这样做你不应该使用forwardRef.

 providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: DatePickerComponent,
      multi: true
    }
  ]