时间戳

首页 > 解决方案 > Angular 5：我们如何使用相同的指令来限制输入字段并在 html 的标签中显示文本

angular5 - Angular 5：我们如何使用相同的指令来限制输入字段并在 html 的标签中显示文本

问题描述

我创建了一个指令来仅在输入中接受数字。但我也想根据输入的值在标签中显示一些文本。我可以从指令到组件获取变量吗？

@Directive({
  selector: '[OnlyNumber]'
})

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  //regexStr = ".*[^0-9].*";
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;
  @Output() tabText: boolean;           //trying to use this for component

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent>event;
    let keyCode = e.keyCode;
    if (this.OnlyNumber) {
      let ch = String.fromCharCode(keyCode);
      let regEx = new RegExp(this.regexStr);
      if (regEx.test(ch)){
        this.tabText = true;            //trying to use this for component
        return;
      } else {
        e.preventDefault();
      }
    }
  }
}

// HTML

<input name="salesprice" type="text" OnlyNumber="true" [(ngModel)]="salesprice" >

如果 tabText 变量设置为 true，我想显示以下标签。请协助。

<label>text entered.</label>

标签： angular5angular2-directives

解决方案

对于仅数字字段，您可以使用

<input name="salesprice" type="number" OnlyNumber="true" [(ngModel)]="salesprice" >

并且仅在设置标签时设置标签，tabText您可以使用

<label *ngIf = "tabText">text entered.</label>

推荐阅读