Validate Email,Phone and PAN number in single Input field in angular 7 form control

Question

so i want to create one input field which will tell the which type it is like mobile or email or PAN no.,so how can we do this in formcontrol

i tried using regex pattern but its not working

<form [formGroup]="validates_input">
<mat-form-field>
    <input matInput placeholder="Enter Email/ PAN / PAN">
  </mat-form-field>
</form>
<button>Submit</button>

Answer 1

you can write your own validator. Using a combination of two different regexp values.

Simple expample for email

([a-z0-9\-\_\.]+\@[\w\d\-\_]+\.[\w]+)

Simple number regexp

([\d]+)

In your component file add this validator function

// the validator
export function checkFilterInputValidator(nameRe: RegExp): ValidatorFn {
  return (control:AbstractControl): {[key:string]: any} | null => {
    // if input field is empty return as valid else test
    const ret = (control.value !== '') ? nameRe.test(control.value) : true;
    return !ret ? {'invalidNumber': {value: control.value}} : null;
  };
}

In your component add to your control

inputControl = new FormControl("", 
                               [Validators.required,
                               checkFilterInputValidator(/([a-z0-9\-\_\.]+\@[\w\d\-\_]+\.[\w]+)|([\d]+)/ig)]);

And in your template, you have to add a field for showing an error or create a error dependent css class, i.e. a red frame of the input box to show there is an error.

<form [formGroup]="validates_input">
<mat-form-field>
<div *ngIf="inputControl .errors && inputControl .errors.invalidNumber">Invalid input</div>
    <input matInput placeholder="Enter Email/ PAN / PAN">
  </mat-form-field>
</form>
<button>Submit</button

Take a look at the documentation: Custom validators