javascript - I want to restrict input type text only Alphanumeric in Angular 9 globally - Stack Overflow

admin管理员组

文章数量:1025207

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 mon logic that will apply for whole application ? Please suggest, I am using Angular 8.

Thank you In advance.

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 mon logic that will apply for whole application ? Please suggest, I am using Angular 8.

Thank you In advance.

• javascript
• html
• angular
• typescript

Share Improve this question Follow asked Oct 1, 2020 at 21:49 Praveen BomminaniPraveen Bomminani 4322 silver badges99 bronze badges 3

• 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 ponent or your own form control factory – Aluan Haddad Commented Oct 1, 2020 at 23:35
• 1 Thank you Aluan, if I create directive .. I need to import that directive in all ponents. basically I don't want to touch any input or ponent.. is there a way I can do by importing that directive in app-module ? the it will effect in all ponents. Please suggest. – Praveen Bomminani Commented Oct 2, 2020 at 12:25
• 1 I got it, I need to define in root module, as suggested in stackblitz./edit/…. – Praveen Bomminani Commented Oct 2, 2020 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

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 mon logic that will apply for whole application ? Please suggest, I am using Angular 8.

Thank you In advance.

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 mon logic that will apply for whole application ? Please suggest, I am using Angular 8.

Thank you In advance.

• javascript
• html
• angular
• typescript

Share Improve this question Follow asked Oct 1, 2020 at 21:49 Praveen BomminaniPraveen Bomminani 4322 silver badges99 bronze badges 3

• 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 ponent or your own form control factory – Aluan Haddad Commented Oct 1, 2020 at 23:35
• 1 Thank you Aluan, if I create directive .. I need to import that directive in all ponents. basically I don't want to touch any input or ponent.. is there a way I can do by importing that directive in app-module ? the it will effect in all ponents. Please suggest. – Praveen Bomminani Commented Oct 2, 2020 at 12:25
• 1 I got it, I need to define in root module, as suggested in stackblitz./edit/…. – Praveen Bomminani Commented Oct 2, 2020 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptI want to restrict input type text only Alphanumeric in Angular 9 globallyStack Overflow