Question

我有以下指令：

declare  var $:any;

export const CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SharedAppDatePickerDirective),
  multi: true
};

@Directive({
  selector: '[date-picker]',
  host: {'(blur)': 'onTouched($event)'},
  providers: [CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR]
})
export class SharedAppDatePickerDirective implements     ControlValueAccessor, OnInit {

  constructor(private el: ElementRef) { }

  private innerValue: string;

  public onChange: any = (_) => { /*Empty*/ }
  public onTouched: any = () => { /*Empty*/ }

  ngOnInit() {

    $(this.el.nativeElement).datepicker().on('change', e => this.onChange(e.target.value)).on('change', e => e.target.focus());
  }

  get value(): any {
    return this.innerValue;
  };

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChange(v);
    }
  }

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

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

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

  ngOnDestroy() {
    $(this.el.nativeElement).datepicker('destroy');
  }
}

当form.reset()出现时，表单控件应用此指令的位置，不会清除其视图值。在form.reset()之后，它变得不受影响，原始，无效，但它保留了我之前键入的值。

有关如何处理的任何想法？

Answer 1

修正了：

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

Angular 2输入指令未在表单重置时清除其视图值

1 个答案: