Angular - 仅在条件为真时调用 Async Validator答案

【问题标题】：Angular - only call Async Validator if condition is trueAngular - 仅在条件为真时调用 Async Validator
【发布时间】：2021-11-26 17:41:55
【问题描述】：

我有一个表格，我可以在其中对照数据库检查用户的电子邮件地址，看看它是否已经存在。如果确实存在，他们将被重定向到登录页面，如果不存在，他们会继续旅程。

如果用户有一个活动链接，我只想调用 emailAlreadyExists() 函数。如果 activeLink == true。我似乎无法弄清楚如何将条件放在我的反应形式或 AsyncValidatorFn 中。

我尝试在 AsyncValidatorFn 中放置 if/else 语句，还尝试在响应式表单中放置 bind(this) 和 using of (rxjs)，但都没有错误。

反应式

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;
                    })
                );
            };
    }

【问题讨论】：

您是否尝试发送用户对象（或指定用户是否具有活动链接的变量）作为参数并在验证器函数中进行检查？
我已经在后端添加了一个验证器来检查链接是否为空，但我想检查链接是否在前端处于活动状态。我想我需要为响应式表单创建一个条件验证器函数。
“链接处于活动状态”是什么意思？它是指示链接是否处于活动状态的变量吗？如果是这样，您应该将此变量传递给验证器函数，并仅在链接处于活动状态时进行检查。如果否，请澄清更多，以便我希望能帮助您。
我阅读了文档并意识到 setAsyncValidators 和 setValidators 存在所以使用它们。感谢您花时间查看我的问题@Sleimanov

标签： angular typescript validation angular-reactive-forms

【解决方案1】：

我只是从我的响应式表单中删除了 asyncValidators 并将其放入一个单独的函数中，并使用模糊规定调用初始化。

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()])
        }
    }

【讨论】：