regex on angular directive return only false

Question

I want to do a directive of can allow input enter only text and space, or integer, or float. but I get only false, in this 3 ways

 <div class="ui-g-10"  >
                <label for="Id">{{'Nome' | doisPontos}}</label><br>
                <div class="ui-inputgroup">
                    <input appFiltrarTipo type="text" formControlName="Nome" style="text-align: left; width: 450px;" id="Nome" appUppercase  [(ngModel)]="secaoForm.value.Nome" [value]="secaoForm.value.Nome" pInputText >
                </div>
            </div>

I pass how parameter I want preventDefault(), but in this 3 parameters the result is only false

import {Directive, ElementRef, Input} from '@angular/core'

let input = Input

@Directive({
    selector: '[appFiltrarTipo]'
})
export class FiltrarTipoDirective {

    private readonly REGEX = {
        text: '[a-zA-Z ]',
        integer: '[0-9]',
        float: '[0-9.]'
    }

    private readonly specialKeys = [ 'Backspace', 'Tab', 'End', 'Home', '-' ];

    @input() type: string;

    constructor(public el: ElementRef) {

        this.el.nativeElement.onkeypress = (evt) => {
            if(this.specialKeys.indexOf(evt.key) !== -1) return;
                let filter = new RegExp(this.REGEX[this.type])
           if(!filter.test(this.el.nativeElement.value)){
               event.preventDefault();
           }
           console.log(filter.test(this.el.nativeElement.value))


        };

    }
}

If you log the value of filter and this.el.nativeElement.value what is the output? — ruby_newbie
– ruby_newbie, Commented Sep 27, 2018 at 16:33

Olena Horal · Accepted Answer · 2018-09-27 16:51:48Z

4

You're very close to the solution. To be more angular - leverage @HostListener. And as one of the comments suggested - you're checking the value of the element (input) on which the event happens. Instead you should check you pressed key value

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

@Directive({
  selector: '[appFiltrarTipo]'
})
export class AppFiltrarTipo {
  @Input() type: string;
  private readonly REGEX = {
    text: '[a-zA-Z ]',
    integer: '[0-9]',
    float: '[0-9.]'
  }
  private readonly specialKeys = ['Backspace', 'Tab', 'End', 'Home', '-'];

  @HostListener('keypress', ['$event'])
  onKeyPress(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1) return;
    const filter = new RegExp(this.REGEX[this.type])

    if (!filter.test(event.key)) {
      event.preventDefault();
    }
  }
}

Full example here

answered Sep 27, 2018 at 16:51

Olena Horal

1,2343 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davi Resio Over a year ago

its work, thank you very much, i will study more about hotlistener

Collectives™ on Stack Overflow

regex on angular directive return only false

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related