具有ControlValueAccessor和formControlName [重复]的角材料Datepicker >> [

Question

此问题已经在这里有了答案：

Custom Component MdDatePicker used in reactive Form

（1个答案）

已关闭

29天前

。

我正在尝试通过Angular Material datepicker使用ControlValueAccessor。由于某种原因，它不适用于formControlName和反应形式。有人可以解决吗？正在为某些样式和属性构建包装器。值发送到反应形式，等等

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

Typescript：

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">

我正在尝试通过Angular Material datepicker使用ControlValueAccessor。由于某种原因，它不适用于formControlName和反应形式。有人可以解决吗？包装器是...

Answer 1

实现ControlValueAccessor，您不应使用标准的输入/输出通信机制。输入值由writeValue提供，通过调用registerOnChange提供的回调函数来通知控件更改形式（输出值）。

请尝试以下代码：

Answer 2

对于Angular Materials 2，请使用此答案，它包含以前的解决方案，但是此后语法已更改。一个人可以利用拉菲·亨尼格的答案，