Angular4指令 - 根据先前值设置输入值

Question

我需要编写angular4指令来检查输入条件： 如果输入字符串是“假”＆＃39; =＆GT;留下以前的书面价值。 Else =＆gt;设置新的给定值。

这是我的镜头：

 import {Directive, ElementRef, HostListener, Input} from '@angular/core';
    import {NgModel} from "@angular/forms";

    @Directive({ selector: '[ngModel][prevVal]'})
    export class PrevValDirective {

      constructor(private el: ElementRef,private model:NgModel) {
      }

      @HostListener('ngModelChange',['$event'])
      onModelChange(event){

        if(event != 'false') {
          this.model.valueAccessor.writeValue(event);
          return true;
        }

        this.model.valueAccessor.writeValue(this.model.value);
        return false;
      }
    }

但似乎onModelChange在模型已经改变后被捕获。

有人可以协助吗？如果用户输入“假”，我该如何撤消更改？ （或者我可以在输入错误之前得到之前的值）？

Answer 1

尝试存储以前的值：

@Directive({ selector: '[ngModel][prevVal]'})
export class PrevValDirective {

  constructor(private el: ElementRef,private model:NgModel) {
  }

  private previousValue: any;

  @HostListener('ngModelChange',['$event'])
  onModelChange(event){

    if (event != 'false') {
      this.model.valueAccessor.writeValue(event);
      return true;
    }

    this.model.valueAccessor.writeValue(this.previousValue);

    this.previousValue = event.value;

    return false;
  }
}

Answer 2

您可以尝试覆盖onChange的<{1}}方法：

ControlValueAccessor

<强> Plunker Example

这是描述角度形状控制如何工作的图片。

我刚做了一些阻止调用@Directive({ selector: '[ngModel][prevVal]'}) export class PrevValDirective { constructor(private valueAccessor: DefaultValueAccessor, private model: NgModel) { valueAccessor.registerOnChange = (fn: (val: any) => void) => { valueAccessor.onChange = (val) => { if(val === 'false') { model.control.setValue(model.value); return; } return fn(val); }; } } } （3-4）

的钩子