Я хочу создать форму, где пользователь будет вводить свою электронную почту. Я хотел бы проверить формат электронной почты на стороне клиента.
Есть ли в Angular 2 общий валидатор электронной почты?
NB: Нечто похожее на валидатор AngularJS.
Я хочу создать форму, где пользователь будет вводить свою электронную почту. Я хотел бы проверить формат электронной почты на стороне клиента.
Есть ли в Angular 2 общий валидатор электронной почты?
NB: Нечто похожее на валидатор AngularJS.
Вы можете использовать Директивы форм и Контроль, чтобы сделать это.
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 { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';
Тогда ваш класс GlobalValidator
:
export class GlobalValidator {
static mailFormat(control: Control): ValidationResult {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_'{|}~.-][email protected][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 для рабочего примера.
(edit: этот reg ex, похоже, не проверяет точку в домене
Я использую этот вместо
/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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>
Для angular 4 и выше:
В соответствии с This вы можете использовать "средство проверки подлинности электронной почты".
Пример:
Если вы используете шаблонные формы:
<input type="email" name="email" email>
<input type="email" name="email" email="true">
<input type="email" name="email" [email]="true">
Если вы используете модельные формы (aka ReactiveFormsModule), используйте Validators.email:
this.myForm = this.fb.group({
firstName: ['', [<any>Validators.required]],
email: ['', [<any>Validators.required, <any>Validators.email]],
});
Старый ответ: вы можете использовать angular 2 FormGroup,
Используя validators.pattern и regex, например:
let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
this.myForm = this.fb.group({
firstName: ['', [<any>Validators.required]],
email: ['', [<any>Validators.required, <any>Validators.pattern(emailRegex) ]],
});
Вот еще один способ проверки поля с помощью RegEx. Вы можете привязать метод к событию keyUp поля.
В вашем компоненте:
import {NgForm} from 'angular2/common';
//...
emailValidator(email:string): boolean {
var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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>
Этот метод будет работать с любой проверкой, поэтому вы можете изменить RegEx и проверить кредитную карту, дату, время и т.д.
Еще один способ сделать это - использовать настраиваемую директиву. Мне нравится этот подход, поскольку он более согласован с другими валидаторами ng2.
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!#$%&'*+\/=?^_`{|}~.-][email protected][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="[email protected]"
validateEmail
Я предполагаю, что сейчас нет средства проверки подлинности электронной почты, но довольно легко добавить пользовательский. См. Эту демонстрацию. Я использовал такое же регулярное выражение, как и для использования угловым1.
function emailValidator(control) {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-][email protected][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 для реактивных форм, что упрощает проверку соответствия:
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>
Обновление для Angular 4
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),
// ...
});
}
Validator
export function emailValidator(control: AbstractControl):{[key: string]: boolean} {
var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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>
Я думаю, что в настоящее время вы можете использовать проверку браузера здесь. Поля электронной почты имеют приличную поддержку, и вы можете получить результат проверки с element.validity.valid
. Вам просто нужно передать это через Angular настраиваемый валидатор
См. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState и http://caniuse.com/#feat=input-email-tel-url для деталей
Я использую: https://www.npmjs.com/package/ng2-validation
npm install ng2-validation --save ng2-validation
Я не отвечаю на ваш вопрос, но для множества распространенных сценариев вы можете найти уже выполненный пользовательский валидатор
пример в вашем случае: email: ['', [CustomValidators.email]]
Лучшие рекомендации,