Angular - only call Async Validator if condition is true

Question

I have a form where I can check a user's email address against the DB to see if it already exists. If it does exist they are redirected to a login page and if it does not exist they continue the journey.

I would only like to only call the emailAlreadyExists() function if the user has an active link. If activeLink == true. I cannot seem to work out how to place the condition within my reactive form or within the AsyncValidatorFn.

I have tried placing an if/else statement within AsyncValidatorFn and have also tried placing bind(this) & using of (rxjs) within the reactive form but neither works without errors.

ReactiveForm

this.firstFormGroup = this._formBuilder.group({
    email: [this.user.email, {
        validators: [Validators.required, Validators.email],
        asyncValidators: [this.emailAlreadyExists()],
        updateOn: 'blur'
    }]
})

AsyncValidatorFn

public emailAlreadyExists(): AsyncValidatorFn {
            return (control: AbstractControl): Observable<ValidationErrors | null> => {
                return this.userService.emailAlreadyExists(new RequestEmailExists({ 
                    email: control.value, 
                    identifier: this.user.identifier })).pipe(
                    map(res => {
                        return res ? { alreadyExistsValidator: true } : null;
                    })
                );
            };
    }

Did you try to send a user object (or the variable that specify if the user have an active link) as a parameter and do the check inside the validator function ? — msleiman
– msleiman, Commented Oct 6, 2021 at 16:13
I have already added a validator to the backend to check if the link is empty but I want to check if the link is active on the frontend. I think I need to create a conditional validator function for the reactive form. — Robgit28
– Robgit28, Commented Oct 7, 2021 at 8:36
What do you mean by "the link is active"? Is it a variable that indicates whether the link is active or not? If so, you should pass this variables to the validator function and do the check only if the link is active. If No, please clarify more so I can help you hopefully. — msleiman
– msleiman, Commented Oct 7, 2021 at 9:52
I read the documentation and realised setAsyncValidators & setValidators existed so used them. Thanks for taking the time to look at my problem @Sleimanov — Robgit28
– Robgit28, Commented Oct 8, 2021 at 9:56

Robgit28 · Accepted Answer · 2021-10-08 10:01:21Z

I simply removed asyncValidators from my reactive form and placed it into a separate function and called on initialisation with the blur stipulation.

this.firstFormGroup = this._formBuilder.group({
    email: [this.user.email, {
                validators: [Validators.required, Validators.email, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
                updateOn: 'blur'
            }]
})

setActiveLinkValidators() {
        const email = this.firstFormGroup.get('email');

        this.currentDate.setHours(0, 0, 0, 0);
        var currentDateCompare = this.currentDate.getTime();

        var expiryDate = this.link.expiryDate;
        var expiryDateCompare = expiryDate.getTime(); 

        if (expiryDateCompare >= currentDateCompare) {
            email.setAsyncValidators([this.emailAlreadyExists()])
        }
    }

Collectives™ on Stack Overflow

Angular - only call Async Validator if condition is true

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related