My angular application consists of a single form whose input elements keeps changing on every next page(click).

toFormGroup(controls: Map<string, ControlTypeBase<any>>, inputForm: any) {
    const control: { [key: string]: AbstractControl } = {};
    let arr: string[] = [];
    let formGroup: FormGroup;
    if (!inputForm) {
      formGroup = new FormGroup(control);
    } else {
      formGroup = inputForm;
    }
    
    controls.forEach(component => {
      arr.push(component.key);
      const validationArray: ValidatorFn[] = [];
      const asyncValidationArray: AsyncValidatorFn[] = [];
      const validationOn = 'change';
      if (component.validators) {
        if (component.validators.required) {
          validationArray.push(Validators.required);
        }
        if (component.validators.regex) {
          const validatorFn: ValidatorFn = regexValidatorFn(
            component.validators.regex,
            component.heading,
            component.validators.regexErrorMessage
          );
          validationArray.push(validatorFn);
        }
        if (component.validators.unique) {
          const service = this.getService(component.validators.unique.serviceName);
          const validatorFn: AsyncValidatorFn = (asyncUniqueValidatorFn(
            service,
            component.validators.unique.functionName,
            component.heading,
            component.key
          ));
          asyncValidationArray.push(validatorFn);
        }
        
      control[component.key] = validationArray
        ? new FormControl(component.value, {
            validators: validationArray,
            updateOn: validationOn
          })
        : new FormControl(component.value);
      
      
       control[component.key].setAsyncValidators(asyncValidationArray);
      control[component.key].setParent(formGroup); //set parent
      formGroup.addControl(component.key, control[component.key]);
      
    });
    return formGroup;
  }

I have an input element component of type text wich has the unique validators defined . This element would render in the first page of a form which has custom asyncvalidator set.

Here’s my asyncvalidator

export function asyncUniqueValidatorFn(service: CommonService, functionName: any, componentHeading: string, key: string): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors> => {
    return service.getData(control.value, functionName, key).pipe(distinctUntilChanged(),
      map(r => {
        if (r instanceof Array) {
          return r.length > 0 ? { uniquenessError: { error: componentHeading + ' has already been used' } } : null;
        } else if (r instanceof Object) {
          return r.isValidValue ? null : { uniquenessError: { error: componentHeading + ' has already been used' } };
        }
        return null;
      })
    );
  };
}

The async validator keeps getting called on every single page of a form even though the value is untouched.Also the asyncvalidator is bound to specific key or element here. control[component.key].setAsyncValidators.

Here’s my text input json
{
“key”: “mycode”,
“label”: “mycode”,
“value”: “”,
“controlType”: “text”,
“autoFocus”: true,
“validators”: {
“required”: true,
“maxLength”: 32,
“regex”: “^[A-Za-z0-9_-]*$”,
“regexErrorMessage”: “code cannot contain special characters except hyphens (-) or underscores (_)”,
“unique”: {
“serviceName”: “myservice”,
“functionName”: “validatecode”
}

Can someone help here as im new to this angular reactive forms.

I’ve tried clearAsyncvalidators but when I move back and forth or If i simply change element value after moving back, the validator is no longer working.

Expecting that asyncvalidator should be called on only input value change. Right now its called multiple times with same value unchanged in multiple pages of a form.