How to restrict reserved characters in input field using angular8

Question

Hi i am using angular8 in my application, i have a file name input field, which should contain alphanumeric characters and except reserved characters other special characters to be allowed. Is there any way to have a directive for that or inline code, and it must restrict pasting of these reserved characters.

The following reserved characters shouldnt be allowed:

< (less than) > (greater than) : (colon) " (double quote) / (forward slash) \ (backslash) | (vertical bar or pipe) ? (question mark) * (asterisk)

HTML:

<input type="text" class="form-control" placeholder="Custom File Name" name="fileName" autocomplete="off" (keypress)="keyPress($event)">

Ts:

 public keyPress(event: any) { const pattern = /[0-9\-\ ]/; let inputChar = String.fromCharCode(event.charCode); if (!pattern.test(inputChar) && event.charCode != '0') { event.preventDefault(); } }

Mohrn · Accepted Answer · 2020-09-01 15:33:56Z

Use a reactive form and clean the input on changes. Works for both copy paste and typing.

 public restricted = new FormControl(); ngOnInit() { this.restricted.valueChanges.subscribe((val) => { const restrictedCharacters = /[-+]/g // Add more restricted characters here if (restrictedCharacters.test(val)) { this.restricted.setValue(val.replace(restrictedCharacters, '')) } }); }

In your template add the restricted form control to your input.

<input [formControl]="restricted" type="text" placeholder="Custom File Name" name="fileName" />

@Eliseo i have tried as you have answered and have modified few things, but i am not able to type anything in my input field, when debugged it is going as empty string.
@Bhrungarajni, there are a problem with the doble quotes, so, declare a variable in your .ts mask='^((?![<>\/?|\\*:"]).)+$' and use [mask]="mask"

Collectives™ on Stack Overflow

How to restrict reserved characters in input field using angular8

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related