如何在 Angular 2 上实现我的自定义验证器? [英] How can i implement my custom validator on Angular 2?

问题描述

如何在 Angular 2 中实现我的自定义验证器?

How can I implement my custom Validator in Angular 2?

我发现了这个plunker:

constructor(private fb: FormBuilder) {
    this.form = fb.group({
        'singleSelection': ['Rio', [App.validateCity]] // initial value as string
        'multipleSelection': [['Red','Blue'], [App.validateColor]]  // initial value as array
    });
}

static validateCity(c: FormControl) {
    if (c.value !== 'New York') {
        return { citySucks: true };
    }
    return null;
}

static validateColor(c: FormControl) {
    if (c.value.indexOf('Green') < 0) {
        return {badColor: true};
    }
    return null;
}

但是，我认为实现一个接口 Validator 会更好，比如 class MinLengthValidator.但是，我不知道如何使用它！

But, I think it would be better to implement an interface Validator, like class MinLengthValidator. But, I don't know how to use it!

推荐答案

//控制处理

          this.form = fb.group({
            'singleSelection': ['Rio', this.text({min: 10})]
          });

//处理最小值的文本函数

// Text function to handle min value

           public static text(config = {}): ValidatorFn {
             return (control: Control): {} => {
                if(!control) {
                   return null;
                }

              let c: string = control.value;

            if(config.min) {
              if(c.length < config.min) {
                  return {
                  "This field must have at least " + config.min + " characters."
                  };
               }
             }
           }}

这篇关于如何在 Angular 2 上实现我的自定义验证器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！