AsyncValidator prevent http if value is null

Question

I created an AsyncValidator to check for the userName uniqueness.

Based on this example, i've added a 500ms delay.

However, i don't know how to prevent the service (http) from being called at all, if the input value doesn't pass a specific requirement.

import { Injectable } from "@angular/core";
import { AsyncValidator, AbstractControl } from "@angular/forms";
import { Observable } from "rxjs/Rx";
import { UsersService } from "../services/UsersService";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Injectable()
export class UniqueUserNameAsyncValidator implements AsyncValidator {
    constructor(private usersService: UsersService) {

    }

    validate(c: AbstractControl): Promise<any> | Observable<any> {
        return Observable.timer(500).switchMap(() => {
            if(!c.value || c.value.length < 4) {
                // TODO
                // prevent call to service if the control value is null / empty

                // return null; // Doesn't work
            }

            return this.usersService.getByName(c.value)
                .map(p => {
                    return { uniqueUserName: true };
                });
        });
    }
}

score 0 · Answer 1 · answered Feb 01 '18 at 13:09

Why don't you flip requirements? change code like

validate(c: AbstractControl): Promise<any> | Observable<any> {
    return Observable.timer(500).switchMap(() => {
        if(c.value || c.value.length >= 4) {
            return this.usersService.getByName(c.value)
            .map(p => {
                return { uniqueUserName: true };
            });
        }else{
          //do things you want if requirements are not fulfilled
        }

    });
}

AsyncValidator prevent http if value is null

1 Answers1