Question

如何创建让我们在Angular 2中说出我自己的maxLength验证器？我可以找到的所有示例都使用类似于＆＃39; required＆＃39;一个意思是他们已经知道规则。他们只接受一个参数 - 控制本身。如何传递更多参数？

这是我的样本验证器。如何修改它以将数字5作为参数传递？

export class MyValidators {
    static minValue(control:Control): {[s: string]: boolean} {
        var num = +control.value;
        if (isNaN(num) || num < 5 ) { return {"minValue": true}; }
        return null;
    }
}

谢谢。

Answer 1

这是一个示例。这是一个最小值验证器，您可以传入一个数字进行验证。

import {Control} from 'angular2/common';

export const minValueValidator = (min:number) => {
  return (control:Control) => {
    var num = +control.value;
    if(isNaN(num) || num < min){
      return {
         minValue: {valid: false}
      };
    }
    return null;
  };
};

更多详情可在Custom Validators官方文档页面中找到。

Answer 2

minValueValidator示例基本上显示您可以将工厂用于自定义验证器，因此它将是这样的：

static minValue = (num: Number) => {
    return (control:Control) => {
         var num = control.value;
         if (isNaN(num) || num < 5 ) { return {"minValue": true}; }
         return null;
    }
}

在我的情况下，我使用 FormControl 而非控制

import { FormControl } from '@angular/forms';

Answer 3

这里的另一个解决方案使用了更多的Angular细微差别：

  static minValue(min: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value == null || control.value == '') {
        //avoid validation if empty, we are not testing for required here
        return null;
      }
      const errors: ValidationErrors = {};
      let num = +control.value;
      if (isNaN(num) || num < min) {
        errors.isLessThanMin = {
          message: `Number must be greater that ${min}`
        };
      }
      return Object.keys(errors).length ? errors : null;
    };
  }

现在您有了更多可重用的html错误消息

<div *ngIf="control.errors.isLessThanMin>{{control.errors.isLessThanMin.message}}</div>

带参数的Angular 2自定义验证器

3 个答案: