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

【问题标题】：Angular 2 custom validator with parameters带有参数的Angular 2自定义验证器
【发布时间】：2016-08-13 20:40:19
【问题描述】：

我如何在 Angular 2 中创建自己的 maxLength 验证器？我能找到的所有示例都使用类似于“必需”的验证器，这意味着他们已经知道规则。他们只接受一个参数 - 控件本身。如何传递更多参数？

这是我拥有的示例验证器。如何修改它以将数字 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;
    }
}

【问题讨论】：

标签： validation parameters angular

【解决方案1】：

这里使用更多 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>

【讨论】：

【解决方案2】：

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

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官方文档页面中找到。

【讨论】：

minValueValidator = (min: number) => {} 会更好？！
那行得通。谢谢！我还添加了 isNaN 检查并将 'export const' 替换为 'static' 以使其成为类的成员。
更新包括 NAN 检查
如何将变量值传递给这个验证器？我注意到它总是需要像这样的字符串常量，并且不会让我这样做
这不适用于 AOT 编译器，因为不支持 lambda：angular.io/guide/aot-compiler

【解决方案3】：

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

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

在我的情况下，我使用 FormControl 而不是 Control

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

【讨论】：