Question

我想使用自定义验证器验证输入值，如下所示：

 <input type="email" name="email" id="email" email="true" appCheckEmail required....

其中appCheckMail是自定义验证器。

挑战是appCheckMail需要针对一系列电子邮件检查输入电子邮件......类似这样：

export class CheckEmailDirective implements Validator {
  constructor(private sharedData: SharedDataService) { }

  validate(control: AbstractControl): {[key: string]: any} | null {
 return this.sharedData.dealers.includes(email) ? {'emailExist': true} : null;
}

问题是我不知道如何将sharedData.dealers数组传递给指令..它甚至可能吗？我知道我可以在指令中使用@Input，并在视图中为appCheckEmail赋值：appCheckEmail =＆＃34; test value＆＃34;。我看到的所有示例都使用字符串值...我尝试分配像appCheckEmail = {{test.alue}}这样的绑定值但是没有用。那么如何将共享数据传递给指令呢？显然注入它不是一种选择。

Answer 1

假设电子邮件数组来自服务而你正在使用模板驱动的表单：

<input #tmp type="email" name="email" id="email" email="true" appCheckEmail>

AppCheckEmailValidator指令：

@Directive({

  selector: '[appCheckEmail][ngModel],[appCheckEmail][formControl]',
  providers: [
    { provide: NG_VALIDATORS useExisting: forwardRef(() => AppCheckEmailValidator , multi: true }
  ]

})

export class AppCheckEmailValidator implements Validator,
    constructor(private sharedData: SharedDataService) { 
        this._createValidator();
    }
    validate(c: AbstractControl): ValidationErrors|null {
        return this._validator(c);    
    }
    registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
    private _createValidator(): void {
        this._validator = MyValidators.appCheckEmail(this.sharedData.dealers);
    }
}

注意：NG_VALIDATORS是一个添加自己的验证器的钩子。 Angular将注入NG_VALIDATORS，将验证器添加到多提供者验证器列表中，然后执行它们。

<强> MyValidators：

export class MyValidators {
    public static appCheckEmail(emailsToCheck: string[]): ValidatorFn {
         return (c: AbstractControl) => {
             if (!control.value || control.value === '') {
               return null;  // don't validate empty values to allow optional controls

             }
             if (emailsToCheck.indexOf(c.value)>=0)
                 return {  emailExist: true  };
             return null;
         }
    }
}

这是解释方法的article。这是来自Angular源的MinlengthValidator的example。

请注意，这尚未经过测试......但它应该有效。

如何将对象从共享数据服务传递到Angular 5验证器指令

1 个答案: