具有ControlValueAccessor和formControlName的角材料Datepicker [英] Angular Material Datepicker with ControlValueAccessor and formControlName

问题描述

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

I am trying to utilize ControlValueAccessor with Angular Material datepicker. For some reason, its not not working with formControlName and a reactive form. Can someone resolve this? The wrappers are being built for certain styling and attributes. The values are sent to reactive form, etc

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等实现

Wanting to implement with formControlName, etc

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

推荐答案

实施ControlValueAccessor时，您不应使用标准的输入/输出通信机制.
输入值由writeValue提供，通过调用registerOnChange提供的回调函数完成通知控件更改形式(输出值).

Implementing ControlValueAccessor you shouldn't use the standard input/output communication mechanism.
The input value is provided by writeValue, notifying the form of changes in the control (output value) is done by calling the callback function provided by 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.

Another point is you specified the class directly in component decorator descriptor. doing so you shouldn't be using forwardRef.

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

这篇关于具有ControlValueAccessor和formControlName的角材料Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！