Question

我有一个具有许多类型的表和不同类型的输入的应用程序。每列都具有正则表达式，用于验证该输入的数字min和max的属性。因此，我想做的是创建一个指令，如果输入数据无效，请清除输入或不要插入无效字符。

我创建了一个指令并导入了inputMask插件InputMask Plugin

并且有意思的是，我使用一个函数来验证输入是否有效，并尝试应用掩码或使用事件清除输入。 stopPropagation，但没有效果！

    import {Directive, ElementRef, HostListener, Input, OnChanges} from '@angular/core';
import { NgControl } from '@angular/forms';
import $ from 'jquery';
import * as Inputmask from 'inputmask';

@Directive({
  selector: '[appIntegralNumbersOnly]'
})
export class IntegralNumbersOnlyDirective {

  @Input() numberValidator: any; // the data
  @Input() isInputValid: any; // The component with the function to validate if data is or not valid

  constructor(private _el: ElementRef) {
  }
  @HostListener('input', ['$event']) onInputChange(event) {
    const regex = '^[1-9][0-9]*?$';

    var isvalid = (this.numberValidator.value.match(this.numberValidator.expression) !== null)? true : false;

    if (!(this.isInputValid.isColumnValid(this.numberValidator))) { // If is not valid apply mask

      Inputmask({regex: regex, placeholder: ''}).mask(this._el.nativeElement);
      //Inputmask("9", { repeat: 10 }).mask(this._el.nativeElement);

      //event.stopPropagation();
      //event.stopImmediatePropagation();
      //event.preventDefault();
    }
  }
}

有人可以帮助我吗？为什么stopPropagation不起作用？为什么插件不能掩盖我的元素。

谢谢你，问候

创建指令以验证输入数据

0 个答案: