Angular2表单中的自定义验证

下面的示例如下：

我的表单如下所示：

<input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel" >
        <div [hidden]="name.valid || name.pristine" 
             class="alert alert-danger">

我想在此表单中添加一些自定义验证。我确实找到了一些关于使用ngFormModel、FormBuilders和Validation类的建议，但我认为这些建议已经过时，不再推荐

（）

然后我的问题是如何添加自定义验证

---

在angular 1.x中，我曾向ngModel.$parsers和ngModel.$formatters管道添加函数。angular 2的等价物是什么？

我使用模型驱动的方法，而不是模板驱动的方法。例如：

表格

<form [formGroup]="myForm">
    <label for="id-name">Name</label>
    <input type="text" id="id-name" formControlName="name">
    <label for="id-age">Age</label>
    <input type="text" id="id-age" formControlName="age">
</form>

FormUtils

type ValidatorResult = {[key:string]:any};

function _isNumber(control:AbstractControl):ValidatorResult {
    let v = control.value;
    if (isPresent(v) && !isNumber(v) && !isEmptyString(v)) {
        return {'isNumber': false};
    }
    return null;
}

export class FormUtils {
      static validators = {
        isNumber: _isNumber
      }
}

这里，

isPresent

、

isNumber

和

ismptystring

非常简单：

isPresent(obj) --> return obj !== undefined && obj !== null;
isNumber(obj) --> return (typeof obj === 'number' && !isNaN(obj));
isEmptyString(obj) --> return obj === '';

目前，Angular 2为您提供了四个有用的验证器：

required

、

minLength

、

maxLength

和

模式

。最后一个相当强大。您可以按照与上面的

\u isNumber

类似的模式编写自己的验证器。如果验证器需要一个参数（例如

lessThan

），则可以使用类似以下模式：

function lessThan(maxVal:number):ValidatorFn {
    return (control:AbstractControl):ValidatorResult => {
        let value = control.value;

        if (isPresent(value) && !isEmptyString(value) && isNumber(value) && parseInt(value) >= maxValue) {
            return {'lessThan': {'maxValue': maxValue, 'actual': value}};
        }

        return null;
    };
}

我知道这种方法（模型驱动）不同于您在问题中发布的表单（模板驱动）。我希望它能有所帮助。

试试这个：

import { CustomValidators } from 'ng2-validation';

ngOnInit() {
   const Email = new FormControl('', [Validators.required, CustomValidators.email]);
}

import { CustomValidators } from 'ng2-validation';

ngOnInit() {
   const Email = new FormControl('', [Validators.required, CustomValidators.email]);
}