按照这里的例子：
https://angular.io/docs/ts/latest/guide/forms.html
我的表格如下：
<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类的建议,不过我相信这些已经过时了,不再推荐
(http://almerosteyn.com/2016/03/angular2-form-validation-component)
在angular 1.x中,我曾经将函数添加到ngModel.$parsers和ngModel.$formatters管道.角度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>
零件
export class MyComponent implements OnInit {
myForm:FormGroup;
ngOnInit() {
let fuv = FormUtils.validators;
this.myForm = this.formBuilder.group({
name: ['',Validators.required],age: ['',[Validators.required,fuv.isNumber]],});
}
}
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和isEmptyString非常简单：
isPresent(obj) --> return obj !== undefined && obj !== null; isNumber(obj) --> return (typeof obj === 'number' && !isNaN(obj)); isEmptyString(obj) --> return obj === '';
目前,Angular 2为您提供了四个有用的验证器：required,minLength,maxLength和pattern.最后一个非常强大.您可以按照与上述_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;
};
}
我知道这种方法(模型驱动)与您在问题中发布的形式(模板驱动)不同.无论如何,我希望它有所帮助.
