[英]How do you validate an email field in angular 2 using model driven form
How do you validate an email field in angular 2 using model driven form, this is what I have so far. 您如何使用模型驱动的形式验证angular 2中的电子邮件字段,这是我到目前为止的内容。
This is my form component 这是我的表单组件
export class signinComponent {
signinform: FormGroup;
constructor(public fb: FormBuilder) {
this.signinform = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required]
});
}
}
This is my form html 这是我的HTML表格
<form class="ui form" [formGroup]="signinform" novalidate>
<div>
<input type="email" class="emailinput" [formControl]="signinform.controls['email']" placeholder="Email Address">
</div>
</form
Validation method: 验证方法:
authEmailValidation( control: FormControl ): {[s:string]:boolean} {
let pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if ( !pattern.test( control.value ) ) {
return { email: true };
}
return null;
}
In your component: 在您的组件中:
this.signinform = this.fbuilder.group( {
email : ["", [this.authEmailValidation]],
// Other fields....
} );
Note: dnt forget in constructor : 注意:dnt在构造函数中忘记了:
private signinform : FormGroup;
private fbuilder: FormBuilder
// and import them
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.