angular - 如何等到用户离开输入框然后在 Angular 中运行 Method

Question

我正在为输入框调用一个方法来检查用户输入的电子邮件是否存在，我的问题是用户输入的每个字符都会运行该方法，我想等到用户退出输入所以我运行该方法一次。

这是我尝试过的代码 - 模糊在这里不起作用。

这是 HTML：

                <input
                formControlName="emailWork"
                label="Work Email"
                type="text"
                (blur)="onInputblur()"
                [error]="hasError('emailWork', 'required') || hasError('emailWork', 'email')"
                errorMessage="Please enter a valid email address." />
            <span class="error-label"
                *ngIf="addUserForm.get('emailWork').hasError('usernameTaken')">Email already exists
            </span>

这是我在 Angular ts 文件中的表格：

constructor(private fb: FormBuilder) {
    this.addUserForm = this.fb.group({
        firstName: ['', [Validators.required]],
        lastName: ['', [Validators.required]],
        emailWork: ['', [Validators.email, Validators.required], this.emailValidator()]
    });
}

这是模糊的：

public isBlured: boolean = false; (at the top)

public onInputblur(): void {
    this.isBlured = true;
    setTimeout(() => {
        this.emailValidator();
    }, 250);
}

这是检查电子邮件是否存在的方法：

private emailValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<any> => {
        return this.service.doesUserNameExist(control.value).pipe(
            debounceTime(500),
            map(exists => (!exists ? null : { usernameTaken: true }))
        );
    };
}

标签： angular

Answer 1

您可以updateOn为该字段设置选项

 this.addUserForm = this.fb.group({
    firstName: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    emailWork: ['', {
        validators: [Validators.email, Validators.required],
        asyncValidators: [this.emailValidator()],
        updateOn: 'blur'
    }]
});