Angular + шаблонные формы — пример проверки электронной почты
Пример, созданный с помощью Angular 15.1.5 и форм, управляемых шаблонами
Это быстрый пример того, как проверить поле ввода электронной почты в Angular с помощью форм, управляемых шаблонами. Для более подробного примера регистрационной формы, которая включает в себя множество других полей, см. Angular 14 — пример проверки формы на основе шаблона.
Вот он в действии:
https://stackblitz.com/edit/angular-template-driven-forms-email-validation
Шаблон компонента с проверкой электронной почты
Шаблон компонента приложения содержит пример формы с одним полем ввода для email. Поле имеет required и email директивы валидатора, валидатор email проверяет, содержит ли поле ввода действительный адрес электронной почты.
Событие отправки формы привязано к методу onSubmit() компонента приложения с привязкой события (ngSubmit)="onSubmit(f)". Переменная шаблона #f="ngForm" создает экземпляр FormGroup для предоставления доступа к данным формы и статусу проверки в компоненте приложения.
Валидаторы и директивы в шаблонных формах
Проверка осуществляется с помощью функций проверки, которые присоединяются к полям с помощью директив в формах, управляемых шаблонами. Валидаторы required и валидаторы email включены в структуру Angular.
Поля ввода, зарегистрированные в родительской форме
Поле ввода электронной почты регистрируется в форме с помощью директивы ngModel. В контексте родительской формы директиву можно использовать без привязки данных ([()]), вместо этого элемент управления регистрируется с использованием атрибута ввода name, а форма поддерживает синхронизацию данных.
<div class="card m-3">
<h5 class="card-header text-center">Angular + Template-Driven Forms - Email Validation Example</h5>
<div class="card-body">
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<div class="row">
<div class="col mb-3">
<label class="form-label">Email</label>
<input type="text" name="email" ngModel #email="ngModel" class="form-control" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email>
<div *ngIf="f.submitted && email.errors" class="invalid-feedback">
<div *ngIf="email.errors.required">Email is required</div>
<div *ngIf="email.errors.email">Email must be a valid email address</div>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary me-1">Submit</button>
<button class="btn btn-secondary" type="reset">Reset</button>
</div>
</form>
</div>
</div>Компонент приложения, который обрабатывает данные формы
Компонент мало что делает при использовании форм на основе шаблонов angular, поскольку поля формы и средства проверки настраиваются в шаблоне компонента.
Метод onSubmit() вызывается с переменной шаблона NgForm при отправке формы, он привязывается к элементу формы в шаблоне с использованием синтаксиса привязки событий Angular ((ngSubmit)="onSubmit(f)"). Если форма действительна, отображается простое alert javascript с введенными значениями.
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {
onSubmit(f: NgForm) {
// stop here if form is invalid
if (f.invalid) {
return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(f.value, null, 4));
}
}
