Angular 5：在自定义验证器中调用服务方法

Question

基本上我已经创建了包含getUserByAlias方法的用户服务。出于测试目的，它除了打印字符串之外什么都不做。我一直在关注视频教程，在教程中他基本上表明您需要确保服务已导入，然后包含在@component 中，然后包含在构造函数中。所以我的文件看起来像这样：

创建-account.component.ts

import { Component, OnInit, NgModule, Injector, Injectable } from '@angular/core';
import { FormBuilder, FormControl, Validators, FormArray, FormGroup, AbstractControl, ValidatorFn, AsyncValidator, AsyncValidatorFn, ValidationErrors, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';




const passwordValidator: ValidatorFn = (fg: FormGroup): ValidationErrors | null => {
    var pw =  fg.get('password');
    var pw2 =  fg.get('passwordre');
    if(pw2.value.length == 0){
        return null
    }
    if(pw && pw2 && pw.value !== pw2.value){
        pw2.setErrors({'passNoMatch': true});
        pw2.markAsTouched();
        return { 'passNoMatch': true };
    }else{
        pw2.setErrors(null);
        return null;
    }
}

const username: ValidatorFn = (control: FormControl): ValidationErrors | null => {
    var alias = control
    if(alias && /^\w+$/.test(alias.value)==false){//if not only numbers and letters
        return { 'illegalChars': true };
    }else if(alias && /^\d+$/.test(alias.value)==true){//If only numbers
        return { 'onlyNumbers': true };
    }else{
        alias.setErrors(null);
        return null;
    }
}


@Component({
    selector: 'app-create-account',
    templateUrl: './create-account.component.html',
    styleUrls: ['./create-account.component.scss'],
    providers: [UserService]
})

export class CreateAccountComponent{
    faCheck = faCheck
    constructor( private fb: FormBuilder, private userService: UserService) {
        this.userService.getUserByAlias('test') 
    }


    checkUsername(control: FormControl): Promise<any> | Observable<any>{
        this.userService.getUserByAlias(control.value)  
        const promise = new Promise<any>((resolve, reject) =>{
            //const user = new UserService();
            setTimeout(()=>{
                if(control.value === 'test'){
                    resolve({usernameTaken: true})
                }else{
                    resolve(null)
                }
            },1500)
        })

        return promise;
    }


    usernameCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(4),
        username
    ], this.checkUsername)
    emailCtrl =  this.fb.control('', [
        Validators.required,
        Validators.email
    ])
    passwordCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(5)
    ])
    passwordreCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(5)
    ])

    newAccountForm = this.fb.group({
        username: this.usernameCtrl,
        email: this.emailCtrl,
        password: this.passwordCtrl,
        passwordre: this.passwordreCtrl
    },{ validator: passwordValidator})
}

用户服务.ts

import { Injectable } from '@angular/core';
@Injectable({
    providedIn: 'root',
})

export class UserService {
    getUserByAlias(alias: any){
        console.log(alias)
        return alias
    }
}

当输入触发时，checkUsername我收到错误：ERROR TypeError: Cannot read property 'userService' of undefined. 我this.userService.getUserByAlias('test')在构造函数内部调用，它打印出来以控制台它需要的东西。所以我假设它不起作用，因为它与在自定义验证器中调用有关。为什么它在验证器中不起作用？我怎样才能让它工作？

Answer 1

原因是因为 的上下文this丢失了。

为了解决这个问题，您可以使用该bind函数，如下所示：

    usernameCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(4),
        username
    ], this.checkUsername.bind(this));

这会将正确的上下文绑定到该函数以确保其正常工作