У меня очень простая форма с одним полем ввода:
this.form = this.fb.group({
emailAddress: ['', [Validators.required, Validators.email]],
});
Разметка:
<input type = "email" class = "form-control" formControlName = "emailAddress">
В этом поле есть два валидатора: обязательные и для электронных писем.
У меня также есть кнопка отправки, которая настроена следующим образом:
<button [disabled] = "!form.valid" type = "submit">Send</button>
Непонятная часть заключается в том, что когда я ввожу неправильный адрес электронной почты, например:
a@b
кнопка отправки становится доступной, тем самым отмечая форму и поле ввода как действительные. Я полагаю, что a@b
не является действительным адресом электронной почты.
Есть ли какой-либо другой валидатор электронной почты в angular, который я должен использовать, или это ошибка?
Если это не подходит для вашего случая, я предлагаю вам поискать в Интернете регулярные выражения (валидатор pattern
). Например: emailregex.com
Обычным является [email protected]
. Почему бы не заставить его работать так и не использовать регулярное выражение для исключений? Теперь это практически бесполезно.
Вы можете использовать шаблон для реализации действительной электронной почты
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email,Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
Пример: https://stackblitz.com/edit/angular-email-validation
Я не могу понять смысл использования Validators.email
, если мы должны вводить шаблон вручную. В документации говорится, что он применяет шаблон регулярного выражения для его проверки.
Angular использует версию регулярного выражения whatwg для проверки электронной почты, вы можете проверить дополнительную информацию здесь html.spec.whatwg.org/multipage/input.html#valid-e-mail-addre ss
Вы можете использовать настраиваемую проверку электронной почты
Я создал демо на Stackblitz
Component.html
<form [formGroup] = "myForm">
<input type = "email" class = "form-control" formControlName = "emailAddress" placeholder = "Enter email">
<button [disabled] = "!myForm.valid" type = "submit">Send</button>
</form>
Component.ts
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
emailAddress: [null, [Validators.required, this.emailValidator]]
});
}
emailValidator(control) {
if (control.value) {
const matches = control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/);
return matches ? null : { 'invalidEmail': true };
} else {
return null;
}
}
для angular просто добавьте атрибут «email» следующим образом:
<label for = "email">Email</label>
<input type = "email" id = "email" name = "email" #email = "ngModel"
ngModel class = "form-control" email required>
<span class = "help-block" *ngIf = "!email.valid && email.touched">
Email is invalid
</span>
Это действующий адрес электронной почты. Не обычный, конечно, но действующий.