Angular2中的通用邮件validation器
我想创build一个表单，用户将input他的邮件。 我想validation邮件格式的客户端。 Angular2中有没有通用的邮件validation器？
NB：类似于angularjsvalidation器的东西： https ：//docs.angularjs.org/api/ng/input/input%5Bemail%5D
您可以使用表单指令和控制来执行此操作。
export class TestComponent implements OnInit { myForm: ControlGroup; mailAddress: Control; constructor(private builder: FormBuilder) { this.mailAddress = new Control( "", Validators.compose([Validators.required, GlobalValidator.mailFormat]) ); } this.addPostForm = builder.group({ mailAddress: this.mailAddress }); } import：
import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';
那么你的GlobalValidator类：
export class GlobalValidator{ static mailFormat(control: Control): ValidationResult { var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) { return { "incorrectMailFormat": true }; } return null; } } interface ValidationResult { [key: string]: boolean; }
然后你的html：
<div class="form-group"> <label for="mailAddress" class="req">Email</label> <input type="text" ngControl="mailAddress" /> <div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger"> <p *ngIf="mailAddress.errors.required">mailAddressis required.</p> <p *ngIf="mailAddress.errors.incorrectMailFormat">Email format is invalid.</p> </div> </div>
有关这方面的更多信息，你可以阅读这个好文章： https : //medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg或看到这个github项目的工作示例 。
（编辑：该登记前似乎并没有检查域中的一个点
我用这个代替
/^(([^<>()\[\]\\.,;:\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,}))$/
）
你只能使用html：
<md-input-container class="md-icon-float md-block" flex-gt-sm> <label>Email</label> <input md-input id="contact-email" type="text" ngControl="email" #email="ngForm" [(ngModel)]="contact.email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$"> <div class="md-errors-spacer" [hidden]="email.valid || email.untouched"> <div class="md-char-counter" *ngIf="email.errors && email.errors.required"> Email is required </div> <div class="md-char-counter" *ngIf="email.errors && email.errors.pattern"> Email is invalid </div> </div> </md-input-container>
对于angular4以上：
据此，你可以使用“电子邮件validation器”。
例：
如果您使用模板驱动的表单：
<input type="email" name="email" email> <input type="email" name="email" email="true"> <input type="email" name="email" [email]="true">
如果您使用模型驱动的表单（又名ReactiveFormsModule），请使用Validators.email ：
this.myForm = this.fb.group({ firstName: ['', [<any>Validators.required]], email: ['', [<any>Validators.required, <any>Validators.email]], });
老答案：你可以使用angular2 FormGroup ，
通过使用validators.pattern和正则expression式像这样：
let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{2,15})$'; this.myForm = this.fb.group({ firstName: ['', [<any>Validators.required]], email: ['', [<any>Validators.required, <any>Validators.pattern(emailRegex) ]], });
这是另一种使用RegExvalidation字段的方法。 您可以将方法绑定到该字段的keyUp事件。
在你的组件中：
import {NgForm} from 'angular2/common';
// …
emailValidator(email:string): boolean { var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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 (!EMAIL_REGEXP.test(email)) { return false; } return true; }
在你的html（视图）
<div class="form-group"> <label>Email address</label> <input type="email" class="form-control" [(ngModel)]="user.email" placeholder="Email address" required ngControl="email" #email="ngForm" (keyup)="emailValidator(email.value) == false ? emailValid = false : emailValid= true"> <div [hidden]="emailValid || email.pristine" class="alert alert-sm alert-danger">Email address is invalid</div> </div>
另一个选项（必填字段+用户离开字段时生效）
<div class="form-group"> <label for="registerEmail">Email address</label> <input type="email" class="form-control" [(ngModel)]="user.email" placeholder="Email address" required ngControl="email" #email="ngForm" (blur)="emailValidator(email.value) == true ? emailIsInvalid = false : emailIsInvalid= true"> <div [hidden]="email.valid || email.pristine" class="alert alert-sm alert-danger">This field is required</div> <div [hidden]="!emailIsInvalid" class="alert alert-sm alert-danger">Email address is invalid</div> </div>
这种方法将与任何validation工作，所以你可以更改RegEx和validation信用卡，date，时间等…
另一种方法是使用自定义指令。 我喜欢这种方法，因为它与其他ng2validation器更一致。
import { Directive, forwardRef } from '@angular/core'; import { NG_VALIDATORS } from '@angular/forms'; import { Validator, AbstractControl } from '@angular/forms'; @Directive({ selector: '[validateEmail][formControlName], [validateEmail][formControl],[validateEmail][ngModel]', providers: [ { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true } ] }) export class EmailValidator implements Validator { constructor() { } validate(c: AbstractControl) { let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; return EMAIL_REGEXP.test(c.value) ? null : { validateEmail: { valid: false } }; }}
然后在HTML中的用法是
<input class="form-control" type="email" [(ngModel)]="user.emailAddress" name="emailAddress" placeholder="first.last@example.com" validateEmail
我猜只是现在没有电子邮件validation程序，但添加自定义程序非常简单。 看到这个演示我用了angular1用法相同的正则expression式。
function emailValidator(control) { var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; if (!EMAIL_REGEXP.test(control.value)) { return {invalidEmail: true}; } }
您也可以使用ng2-validation-manager来进行反应式表单，这使得validation匹配更容易：
this.form = new ValidationManager({ 'email' : 'required|email', 'password' : 'required|rangeLength:8,50' });
和观点：
<form [formGroup]="form.getForm()" (ngSubmit)="save()"> <div class="form-group"> <label>Email</label> <input type="text" class="form-control" formControlName="email"> <div *ngIf="form.hasError('email')" class="alert alert-danger"> {{form.getError('email')}} </div> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" formControlName="password"> <div *ngIf="form.hasError('password')" class="alert alert-danger"> {{form.getError('password')}} </div> </div> <button type="submit" class="btn btn-success">Submit</button> </form>
我想现在你可以在这里使用浏览器validation。 电子邮件字段有一个体面的支持，你可以从element.validity.valid得到validation结果。 你只需要通过Angular自定义validation器
有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/ValidityState和http://caniuse.com/#feat=input-email-tel-url 。
更新angular4
ngOnInit() { this.user = new FormGroup({ name:new FormGroup({ firstName : new FormControl('',Validators.required), lastName : new FormControl('') }), age:new FormControl('',null,validate), email: new FormControl('',emailValidator), .... }
validation器
export function emailValidator(control: AbstractControl):{[key: string]: boolean} { var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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 (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) { return {invalid:true}; } return null; }
模板
<div class="row"> <div class="col-md-12"> <md-input-container> <input mdInput type="text" placeholder="Email" formControlName="email"> </md-input-container> </div> </div> <div class="row"> <div class="col-md-12"> <span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine"> <small>Invalid email</small> </span> </div> </div>
我正在使用： https ： //www.npmjs.com/package/ng2-validation
npm安装ng2-validation –save ng2-validation
我没有回应你的问题，但对于很多常见的情况，你可以find一个自定义validation器已经实现
例如你的情况：电子邮件：[''，[CustomValidators.email]]
最好的Reagards，
