[英]How to add form validation pattern in Angular 2?
我有一个简单的表单,需要验证输入的开头和结尾是否不是空格。
在HTML5中,我将这样做:
<input type="text" pattern="^(?!\s|.*\s$).*$">
新Angular 2 ngControl指令中验证模式的正确属性是什么? 官方Beta API仍缺乏此问题的文档。
现在,您不需要使用FormBuilder
和所有这些复杂的valiation角度内容。 我从中提出了更多细节(Angular 2.0.8 - 3march2016): https : //github.com/angular/angular/commit/38cb526
回购示例:
<input [ngControl]="fullName" pattern="[a-zA-Z ]*">
我测试它,它的工作原理:) - 这是我的代码:
<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm' >
...
<input
id='room-capacity'
type="text"
class="form-control"
[(ngModel)]='room.capacity'
ngControl="capacity"
required
pattern="[0-9]+"
#capacity='ngForm'>
验证仅在服务器端进行。 如果出现问题,则服务器返回错误代码,例如HTTP 400,并在响应正文中跟随json对象(例如):
this.err = {
"capacity" : "too_small"
"filed_name" : "error_name",
"field2_name" : "other_error_name",
...
}
在html模板中我使用单独的标签(div / span / small等)
<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>
如果'capacity'是错误的话,那么带有msg翻译的标签将是可见的。 这种方法有以下优点:
<small>
标签) 当然,如果在前端需要验证,有时我会例外(例如,注册时的retypePassword
字段永远不会发送到服务器)。
从版本2.0.0-beta.8(2016-03-02)开始,Angular现在包含Validators.pattern
正则表达式验证器。
您可以使用FormBuilder构建表单,因为它可以让您更灵活地配置表单。
export class MyComp {
form: ControlGroup;
constructor(@Inject()fb: FormBuilder) {
this.form = fb.group({
foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]
});
}
然后在你的模板中:
<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>
您还可以自定义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模板
<form [ngFormModel]="demoForm">
<input
name="NotAllowSpecialCharacters"
type="text"
#demo="ngForm"
[ngFormControl] ="demoForm.controls['spec']"
>
<div class='error' *ngIf="demo.control.touched">
<div *ngIf="demo.control.hasError('required')"> field is required.</div>
<div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
</div>
</form>
组件应用程序
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 };
}
}
}
}
我使用Angular 4.0.1的解决方案:只显示所需CVC输入的UI - 其中CVC必须正好是3位数:
<form #paymentCardForm="ngForm">
...
<md-input-container align="start">
<input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
<md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
<span [hidden]="!cvc2.errors.required && cvc2.dirty">
CVC is required.
</span>
<span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
CVC must be 3 numbers.
</span>
</md-hint>
</md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>
如果没有make验证模式,您可以使用这些模块轻松修剪开始和结束空间。试试这个。
https://www.npmjs.com/package/ngx-trim-directive https://www.npmjs.com/package/ng2-trim-directive
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.