Общий валидатор почты в Angular2

Я хочу создать форму, в которую пользователь войдет в свою почту. Я хотел бы проверить почтовый формат на стороне клиента. Есть ли общий валидатор почты в Angular2?

NB: что-то похожее на валидатор angularjs: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Для этого вы можете использовать Form Directives и Control.

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'; 

Затем ваш class 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:

 

mailAddressis required.

Email format is invalid.

Для получения дополнительной информации об этом вы можете прочитать эту хорошую статью: https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg или посмотреть этот проект github для рабочего примера .

(отредактируйте: этот 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,}))$/ 

cfr http://emailregex.com/

Вы можете использовать только html:

    
Email is required
Email is invalid

Для углов 4 и выше:

В соответствии с этим вы можете использовать «средство проверки подлинности электронной почты».

Пример:

Если вы используете шаблонные формы:

    

Если вы используете модельные формы (aka ReactiveFormsModule), используйте Validators.email :

 this.myForm = this.fb.group({ firstName: ['', [Validators.required]], email: ['', [Validators.required, Validators.email]], }); 

Старый ответ: вы можете использовать угловые 2 FormGroup ,

Используя validators.pattern и regex, например:

  let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{2,15})$'; this.myForm = this.fb.group({ firstName: ['', [Validators.required]], email: ['', [Validators.required, Validators.pattern(emailRegex) ]], }); 

Еще один способ сделать это – использовать настраиваемую директиву. Мне нравится этот подход, поскольку он более согласован с другими валидаторами 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

  

Вот еще один способ проверки поля с помощью 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 (view)

 
Email address is invalid

Другая опция (обязательное поле + подтверждение, когда пользователь покидает поле)

 
This field is required
Email address is invalid

Этот метод будет работать с любой валидацией, поэтому вы можете изменить RegEx и подтвердить кредитную карту, дату, время и т. Д. …

Я предполагаю, что сейчас нет проверки подлинности электронной почты, но довольно легко добавить пользовательский. См. Эту демонстрацию. Я использовал такое же регулярное выражение, как и угловое.

 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.getError('email')}}
{{form.getError('password')}}

Обновление для углового 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; } 

шаблон

 
Invalid email

Я думаю, что в настоящее время вы можете использовать проверку браузера здесь. Поля электронной почты имеют приличную поддержку, и вы можете получить результат проверки из element.validity.valid . Вам просто нужно передать это через Угловой пользовательский валидатор

См. 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

Я не отвечаю на ваш вопрос, но для множества распространенных сценариев вы можете найти уже выполненный пользовательский валидатор

пример в вашем случае: электронная почта: [”, [CustomValidators.email]]

С наилучшими пожеланиями,

  • Как передать объект из одного компонента в другой в Angular 2?
  • Как обмениваться услугой между двумя модулями - @NgModule в угловом не между компонентами?
  • ng не распознается как внутренняя или внешняя команда
  • Угловое 2 с использованием RxJS - принять (1) против первого ()
  • Угловой материал Не удалось найти основную тему углового материала
  • Каковы различия между SystemJS и Webpack?
  • Как получить параметры запроса от url в угловом 2?
  • Выражение ___ изменилось после проверки
  • Невозможно связать с 'formGroup', поскольку это не известное свойство 'form'
  • Как установить связь между компонентом в угловом?
  • Внедрение архитектуры плагинов / системы плагинов / сменных фреймов в Angular 2, 4, 5, 6
  • Давайте будем гением компьютера.