0

Can any one suggest me how can I add ng-pattern / directive / RegEx globally ? so that I do not want to go to each page and touch every input by adding ng-pattern or adding directive.

My application has around 200 pages , I don't want to restrict each text input with only alpha numeric.

is there any solution write common logic that will apply for whole application ? Please suggest, I am using Angular 8.

Thank you In advance.

Praveen Bomminani
  • 21
  • 1
  • 6
  • You could apply it to all inputs using a directive but I don't know if you really want to do that. You might be better served by writing your own input component or your own form control factory – Aluan Haddad Oct 01 '20 at 23:35
  • 1
    Thank you Aluan, if I create directive .. I need to import that directive in all components. basically I don't want to touch any input or component.. is there a way I can do by importing that directive in app-module ? the it will effect in all components. Please suggest. – Praveen Bomminani Oct 02 '20 at 12:25
  • 1
    I got it, I need to define in root module, as suggested in https://stackblitz.com/edit/angular-zc8nef?file=src%2Fapp%2Fapp.module.ts. – Praveen Bomminani Oct 02 '20 at 12:37

1 Answers1

4

if you make a directive with selector input is applied to all yours inputs

@Directive({
  selector: 'input'
})

You can use a directive like this SO you are next to get it, only replace the input set mask for something like

  @Input()
  set mask(value) {
    if (value == "*")
      this.notApplied = true;
    else
      this.regExpr = new RegExp(value);
  }

declare regExpr as

  private regExpr = new RegExp(/^[A-Z|a-z|0-9]+$/);

and change the host listener checkin if this.notApplied

  @HostListener('input', ['$event'])
  change($event) {
    if (this.notApplied)
      return;
    ...
  }

All your inputs that has no [mask]="what ever" applied the mask by defect

A input with mask="*" will be a "normal" input

See the forked directive

Eliseo
  • 50,109
  • 4
  • 29
  • 67