我有一个简单的表单,需要验证输入的开头和结尾是否不是空格.
在HTML5中,我将这样做:
新Angular 2 ngControl指令中验证模式的正确属性是什么？官方Beta API仍缺乏此问题的文档.
现在,你不需要使用FormBuilder和所有这些复杂的valiation角度的东西.我从中提出了更多细节(Angular 2.0.8 - 3march2016):https:
//github.com/angular/angular/commit/38cb526
回购示例:
我测试它,它的工作原理:) - 这是我的代码:
验证仅在服务器端进行.如果出现问题,则服务器返回错误代码,例如HTTP 400,并在响应正文中跟随json对象(例如):
this.err = {
"capacity" : "too_small"
"filed_name" : "error_name",
"field2_name" : "other_error_name",
...
}
在html模板中我使用单独的标签(div/span/small等)
{{ translate(err.capacity) }}
如果'capacity'是错误的话,那么带有msg翻译的标签将是可见的.这种方法有以下优点:
这很简单
避免前端的后端验证代码重复(对于regexp验证,这可以防止或复杂ReDoS攻击)
控制显示错误的方式(例如标签)
backend返回error_name,很容易在前端翻译成正确的语言
当然,如果在前端需要验证,有时我会例外(例如retypePassword,注册时的字段永远不会发送到服务器).
从版本2.0.0-beta.8(2016-03-02)开始,Angular现在包含一个Validators.pattern正则表达式验证器.
见CHANGELOG
您可以使用FormBuilder构建表单,因为它可以让您更灵活地配置表单.
export class MyComp {
form: ControlGroup;
constructor(@Inject()fb: FormBuilder) {
this.form = fb.group({
foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]
});
}
然后在你的模板中:
Please correct foo entry !
您还可以自定义ng-invalid CSS类.
由于实际上没有正则表达式的验证器,你必须自己编写.它是一个简单的函数,它在输入中获取一个控件,如果有效则返回null,如果无效则返回StringMap.
export class MyValidators {
static regex(pattern: string): Function {
return (control: Control): {[key: string]: any} => {
return control.value.match(pattern) ? null : {pattern: true};
};
}
}
希望它能帮到你.
自定义验证一步一步
Html模板
组件应用程序
import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';
在类定义下
demoForm: ControlGroup;
constructor( @Inject(FormBuilder) private Fb: FormBuilder ) {
this.demoForm = Fb.group({
spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])),
})
}
在{ ../../yourServices/validatorService.ts }下
export class CustomValidator {
static specialCharValidator(control: Control): { [key: string]: any } {
if (control.value) {
if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {
return null;
}
else {
return { 'invalidChar': true };
}
}
}
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 