How to restrict certain strings from input in angular

Question

I want to restrict certain string like TEST,DUMMY to be removed from text box entry, i did below code but not working

 <mat-form-field class="example-full-width" style="width:1000%"> <input (input)="inputValidator($event)" matInput id="SiteId" formControlName="SiteId" placeholder="Enter Site Id" type="text" required /> </mat-form-field>

In .ts file

 public inputValidator(event: any) { console.log('event.target'+event.target.value); // const pattern = /^[a-zA-Z0-9]*$/; const pattern =/^(TEST|DUMMY)$/ ; //let inputChar = String.fromCharCode(event.charCode) if (!pattern.test(event.target.value)) { event.target.value = event.target.value.replace(/[^(TEST|DUMMY)$]/g, ""); // invalid character, prevent input } }

Create get fn() {} which match with regex, add this fn to formControl to ts file. i.e. this.fb.group({SiteId: ["", [ Validators.required, Validators.pattern(this.fn), ]] }); — Abhishek
– Abhishek, Commented Apr 4, 2022 at 10:29

Kanishk Anand · Accepted Answer · 2022-04-04 11:43:10Z

You should create your own validator to test against this patterns, and then subscribe to statusChanges to check if value is valid or not, and then update the FormControl if it matches your regex.

ngOnInit(): void { // assuming you have a FormBuilder already in your component this.fb.group({ SiteId: ['', [Validators.required, customValidator]] }); // subscribe to status changes to overwrite the value const siteControlSub = this.fb.get('SiteId').statusChanges.subscribe((status) => { const control = this.fb.get('SiteId'); // if control is INVALID and has the custom error that we set, then replace the value if(status === 'INVALID' && control.hasError('invalidPattern')) { control.setValue(control.value.replace(/[^(TEST|DUMMY)$]/g, "")) } } } // custom validator function to check against a regex customValidator(): ValidatorFn { return (formControl: AbstractControl): ValidationErrors | null => { const value = formControl.value; const pattern =/^(TEST|DUMMY)$/; if(value.match(pattern)) { return { invalidPattern: true } } else if(!value) { return { required: true } } return true; } }

In your HTML:

<mat-form-field class="example-full-width" style="width:1000%"> <input matInput id="SiteId" formControlName="SiteId" placeholder="Enter Site Id" type="text" /> </mat-form-field>

Collectives™ on Stack Overflow

How to restrict certain strings from input in angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related