以角度形式删除重复的属性（ngModel，值）答案

【问题标题】：Remove duplicate attribute(ngModel, value) in angular forms以角度形式删除重复的属性（ngModel，值）
【发布时间】：2018-09-24 12:08:20
【问题描述】：

我制作了一个DatePickerDirective，它可以根据需要正常工作。但是为了同步该指令所在的特定输入字段的值，我必须同时使用 value 和 ngModel 属性。我希望只使用 ngModel 如何优雅地实现。

表单元素

 <input appDatePicker type="text" required name="title" value="{{holiday.off_date}}" [(ngModel)]="holiday.off_date" class="form-control"
                       placeholder="01/01/2018">

组件文件

export class HolidayCreateComponent implements OnInit, OnDestroy {

  holiday = new HolidayModel('', '');

}

模型文件

export class HolidayModel {

  constructor(public occasion: string, public off_date: string) {
  }

}

指令文件

import {Directive, ElementRef, forwardRef, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

declare const $: any;

@Directive({
  selector: '[appDatePicker]',
  providers: [{
    provide: NG_VALUE_ACCESSOR, useExisting:
      forwardRef(() => DatePickerDirective),
    multi: true
  }]
})
export class DatePickerDirective implements OnInit, ControlValueAccessor {

  value: string;

  constructor(private el: ElementRef) {

  }


  ngOnInit() {
    $(this.el.nativeElement).datepicker({
      autoclose: true,
      todayHighlight: true,
      format: 'dd/mm/yyyy'
    }).on('change', e => this._onChange(e.target.value));
  }


  private _onChange(_) {
  }

  private _onTouched(_) {
  }

  registerOnChange(fn: any): void {
    this._onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
  }

  writeValue(val: string): void {
    this.value = val;
  }


}

问题是每当我尝试从组件中操作日期字段的值时，我都需要同时使用值和 ngmodel。我认为这是不对的，可以改进。有什么我忘记的吗？

注意： value 和 ngModel 仅在使用指令时才需要。如果输入没有指令，那么 ngModel 就完美了。我希望带有指令的元素具有相同的行为。

【问题讨论】：

标签： angular angular-directive angular-ngmodel angular-forms

【解决方案1】：

value 仅表示initial，日期选择器的默认值。 ngModel 是双向绑定对象，在用户选择日期后包含您的数据。你的代码很好。

【讨论】：

但是如果我不使用指令，那么只有 ngmodel 对我有用。只有使用指令时才会出现这种情况。每当从日期选择器中选择日期时，都不会触发更改，因此 ngmodel 不会绑定到变量。
这可能是因为您订阅了更改事件的指令.on('change', e => this._onChange(e.target.value)); 您将 nativeElement.value 插入到 onChange 函数中。