Angular11 reactive form on change validate to check for duplicate value

Question

I am using Angular 11 and creating a simple reactive form with a formcontrolname 'name'. when user types in this field, i need to validate for uniqueness. I tried following but it validates for every time i type something, but want to use debouncetime and use similar logic. Not sure how to do this with reactive form

Can anyone help me how to achieve this?

I end up with the following AsyncVaildator. Can anyone please help me if this can be simplified? Because i am passing the service to the method. is there a way to use dependency injection here?

export class TemplateNameValidator {
    createValidator(auditTemplateService: AuditTemplateService): AsyncValidatorFn {
      console.log("Static factory call");
      
      return (control: AbstractControl): Observable => {
        if(isEmptyInputValue(control.value)) {
            return of(null);
        } else {
            return control.valueChanges.pipe(
                debounceTime(500),
                distinctUntilChanged(),
                take(1),
                switchMap((name: string) => 
                    auditTemplateService.isNameUnique(name)
                        .pipe(
                            map(isUnique => !isUnique ? { 'duplicate': true } : null)
                        )
                )
            );
        }
      };
    }
  }

  function isEmptyInputValue(value: any): boolean {
      return value === null || value.length === 0;
  }



private registerFormGroup(): void {
        this.nameField = new FormControl(
            { value: this.auditTemplate.title, disabled: true },
            [Validators.compose([
                Validators.required,
                (control) => this.isNameUnique(control as AbstractControl)
            ])]
        );

        this.templateForm = this.formBuilder.group({
            templateName: this.nameField,
            tags: [this.auditTemplate.tags]
        });
    }

validation to check uniqueness:

isNameUnique(formField: AbstractControl): { [key: string] : any} {
        const nameEntered = formField.value;
        let isDuplicate = false;
        if(nameEntered && this.availableNames) {
            const index = this.availableNames.findIndex(templateName => 
                        templateName.name === nameEntered);
            if(index !== -1) {
                isDuplicate = true;
            }
        }
        return isDuplicate ? { 'duplicate': true } : null;
    }

Thanks

user_310726 · Answer

I'm sure there are many solutions to this problem and it's in nutshell described in the documentation https://angular.io/guide/form-validation#implementing-a-custom-async-validator.

However, it's not very obvious how to use async validators. So a minimal example could look like this:

const myValidator: AsyncValidatorFn = (control: AbstractControl) => of(control.value)
  .pipe(
    delay(1000),
    map(value => {
      if (value === '1') {
        return null;
      }
      return { invalid: true } as ValidationErrors;
    }),
    tap(console.log),
    finalize(() => console.log('async validator unsubscribed')),
  );

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  control = new FormControl('', Validators.required, myValidator);
}

Live demo: https://stackblitz.com/edit/angular-ivy-mk4wyv?file=src%2Fapp%2Fapp.component.ts

The validator takes the most recent value from control, delays it and then performs some check. In this case the validator passes only when you type "1" into the input field.

Note that the debounce is performed by delay() and there's no debounceTime() operator used. This is because the validation method is invoked on every control value change and needs to return an Observable that emits and completes. If there was another validation Observable pending, Angular will unsubscribe it and subscribe to the new Observable. That's why you'll see many 'async validator unsubscribed' logs in console.

One last thing, async validators are passed to FormControl as another parameter, not among regular validators:

new FormControl('', Validators.required, myValidator)

Angular11 reactive form on change validate to check for duplicate value

1 Answers