Angular 2 ограничивают поле ввода

Question

Мне было интересно, можно ли ограничить поле ввода определенным форматом, например, таким количеством цифр, как вы хотите, затем "."а потом 2 цифры?Это в основном входные данные для цены ... И я не хочу простой проверки, такой как атрибут pattern.Я хочу, чтобы пользователь не мог сделать ложный ввод.

Answer 1

вам нужно использовать директиву.В директиве добавьте hotListener о входных данных и проверьте, совпадает ли с regExpr.Я делаю директивную маску некоторое время назад.Директива в стек с указанием, что код предоставляется «как есть», без каких-либо гарантий.

@Directive({
  selector: '[mask]'
})
export class MaskDirective {
  @Input()
  set mask(value) {
    this.regExpr = new RegExp(value);
  }

  private _oldvalue: string = "";
  private regExpr: any;
  private control: NgControl;
  constructor(injector: Injector) {
    //this make sure that not error if not applied to a NgControl
    try {
      this.control = injector.get(NgControl)
    }
    catch (e) {
    }
  }
  @HostListener('input', ['$event'])
  change($event) {

    let item = $event.target
    let value = item.value;
    let pos = item.selectionStart; //get the position of the cursor
    let matchvalue = value;
    let noMatch: boolean = (value && !(this.regExpr.test(matchvalue)));
    if (noMatch) {
      item.selectionStart = item.selectionEnd = pos - 1;
      if (item.value.length < this._oldvalue.length && pos == 0)
        pos = 2;
      if (this.control)
        this.control.control.setValue(this._oldvalue, { emit: false });

      item.value = this._oldvalue;
      item.selectionStart = item.selectionEnd = pos - 1; //recover the position
    }
    else
      this._oldvalue = value;
  }
}

Будьте осторожны, когда пишете «маску» встрока (или в HTML).например, для ширины числа два десятичных знака:

[mask]="'^[+-]?([1-9]\\d*|0)?(\\.\\d\{0,2\})?$'"

(\ должен быть записан как \\, {as \ {,} как \} ...)

Answer 2

вы можете использовать функцию HTML5, ввод регулярных выражений

с проверкой шаблонов регулярных выражений:

<input type="text" name="weight" value="" pattern="^[1-9]\d{0,*}\.\d{2}$" />

вы также можете использовать эту библиотеку, украсить свой ввод клавишей:

<input type="text" pattern="[0-9]+" ng-pattern-restrict /> 

репо: github.com/AlphaGit/ng-pattern-restrict