Угловой 5: Как мы можем использовать ту же директиву для ограничения поля ввода и отображения текста в метке для HTML - PullRequest
Новая
       13

Угловой 5: Как мы можем использовать ту же директиву для ограничения поля ввода и отображения текста в метке для HTML

0 голосов
/ 06 июля 2018

Я создал одну директиву, чтобы принимать числа только при вводе. Но я также хочу показать текст в метке в соответствии с введенным значением. Могу ли я получить переменную из директивы в компонент? 

@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>

1 Ответ

0 голосов
/ 06 июля 2018

Для поля только номера вы можете использовать 

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

И для установки метки только при установленном tabText вы можете использовать 

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