Angular 4 - 需要向父组件显示指令的错误消息

Question

我在计算器页面中有一个要求，其中有 40 个字段可用。每个字段都使用数字格式（逗号分隔值）进行验证，不接受字段中的字符。我在 onkeyup 事件中遇到问题，我们正在检查用户输入数字和逗号，我需要在 keyup 事件 "Ok - Press the TAB key to recalculate." 上显示一条消息。为此，我创建了指令。它验证但无法在组件上显示消息。我们可以再添加一个选择器吗？或者任何其他解决方案？

  <input name="salesprice" type="text" OnlyNumber="true" [ngModel]="salesprice | numberFormat" (ngModelChange)="salesprice=removeCommas($event)" (blur)="onZipChange()" (focus)="calClick($event)" class="input-highlight">

============================================= ==========

   import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';

    @Directive({
    selector: '[OnlyNumber],[tabText]'
    })
    export class OnlyNumber {

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

    @Input() OnlyNumber: boolean;
    @Output() tabText: boolean;
    @Output() itch:EventEmitter<any> = new EventEmitter();
    /// our click is a representation of a scratch
    @HostListener('onClick') onClick(){
    ///We are emitting itchies!!
    /* this.itch.emit('itch itch itch');
    console.log("this.itch");
    console.log(this.itch); */
    }

    @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent>event;
    let keyCode = e.keyCode;
    if (this.OnlyNumber) {
      if(keyCode >= 96 && keyCode <= 105) {
        keyCode -= 48;
      }
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(keyCode) !== -1 ||
        // Allow: Ctrl+A
        (keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (keyCode >= 35 && keyCode <= 39)) {
        return;
      }
      let ch = String.fromCharCode(keyCode);
      let regEx = new RegExp(this.regexStr);
      if (regEx.test(ch)){
        this.tabText = true;
        return;
      } else {


        e.preventDefault();
      }
    }
    }

    @HostListener('blur', ['$event']) onBlur(event) {
    let e = <KeyboardEvent>event;
    if (this.OnlyNumber) {
      /* console.log("this.OnlyNumber");
      console.log(event.target.value); */
      this.tabText = false;
    }
    }
    }

Answer 1

试试这个 Solution

directive.ts

import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';

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

export class OnlyNumber {

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

  @Input() OnlyNumber: boolean;
  @Output() tabText: boolean;
  @Output() itch: EventEmitter<any> = new EventEmitter();
  @Output() warning: EventEmitter<any> = new EventEmitter();
  /// our click is a representation of a scratch
  @HostListener('onClick') onClick() {
    ///We are emitting itchies!!
    /* this.itch.emit('itch itch itch');
    console.log("this.itch");
    console.log(this.itch); */
  }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent>event;
    let keyCode = e.keyCode;
    if (this.OnlyNumber) {
      if (keyCode >= 96 && keyCode <= 105) {
        keyCode -= 48;
      }
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(keyCode) !== -1 ||
        // Allow: Ctrl+A
        (keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (keyCode >= 35 && keyCode <= 39)) {
        return;
      }
      let ch = String.fromCharCode(keyCode);
      let regEx = new RegExp(this.regexStr);
      if (regEx.test(ch)) {
        this.tabText = true;
        return;
      } else {
        this.warning.emit(false)
        e.preventDefault();
      }
    } else {
      this.warning.emit(false);
    }
  }

  @HostListener('blur', ['$event']) onBlur(event) {
    let e = <KeyboardEvent>event;
    if (this.OnlyNumber) {
      /* console.log("this.OnlyNumber");
      console.log(event.target.value); */
      this.tabText = false;
    }
  }
}

app.component.html:

<input (warning)="errorOutput($event)"  name="salesprice"  placeholder="Enter Number" type="text" OnlyNumber="true"  
 class="input-highlight">

app.component.ts:

import { Component, ViewChild } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() { }

  ngOnInit() {
  }

 errorOutput(event){
   if(!event){
     alert("Please Enter Number Only");
   }
 }
}

Angular 4 - 需要向父组件显示指令的错误消息

Angular 4 - Need to show error message from Directive to parent Component

angular

directive

renderer

eventemitter