Odtnhj

I am creating a conditional custom validator to check if a value of drop list changed, to add a new validator to another form control.

The drop list form control contain several value, and when the user change it to u_id I need to add to run a new validator on form control to take the u_id number according to a specific format:

<mat-select id="gov_id_type" formControlName="gov_id_type" placeholder="Gov. ID Type">
 <mat-option value="birth_certificate">Birth Certificate</mat-option>
 <mat-option value="regular_id">ID Card</mat-option>
 <mat-option value="u_id">UID</mat-option>
<mat-select>

And the form control where the new validator should be added when selecting u_id:

<mat-form-field color="warn" appearance="outline">
 <mat-label>Gov. ID Number</mat-label>
 <input matInput id="gov_id_number" formControlName="gov_id_number" placeholder="Gov. ID Number">
</mat-form-field>&nbsp;

I created the custom validator to check if the gov_id_number has the following format if u_id selected, else, the system can accept any type of format:

import AbstractControl from '@angular/forms';

export function uIdValidation(control: AbstractControl)

 const regex = /^[A-Z][0-9]3-[0-9]2[C]1[0-9]5$/i;
 let val = control.value;
 if(!regex.test(val))
 
 return response: true;
 
 return null;

The regex /^[A-Z][0-9]3-[0-9]2[C]1[0-9]5$/i means that I need the id to be like:

Q12-12C12345

The first 3 letters are alphanumeric with capital alpha values, then a - then 2 digits followed by C letter then 5 digits at the end.

I made a typescript function using valueChanges and setValidator:

runValidator()
 let gov_id_number = this.formGroup.get('gov_id_number');
 this.formGroup.controls['gov_id_type'].valueChanges.subscribe(
 (mode: String)=>
 console.log(mode)
 if(mode=='u_id')
 
 gov_id_number.setValidators([uIdValidation])
 
 else
 
 gov_id_number.clearValidators()
 
 
 );
 

Of course, uIdValidation is imported:

import uIdValidation from 'src/app/dashboard/custom-validators/unIdValidation';

And I added runValidator() into ngOnInit() hook as mentioned in this tutorial

When I change the drop list into u_id value, the validator does not run immediately. I should select different value, then the u_id so the validator could run as expected. And another problem is that when I change it again from u_id to other values, the validator is not cleared.

I tried to run the function on (selectionChange) event on the drop list:

<mat-select id="gov_id_type" (selectionChange)="runValidator()" formControlName="gov_id_type" placeholder="Gov. ID Type">

It didn't work. If I selected the u_id at the beginning it won't run the validator, and when I select it again it works.

Here is a stackblitz.

I think there is a problem with the RegEx too.