Учебное пособие по проверке форм в Angular 7 сегодня является ведущей темой. В Angular у нас есть два типа форм: Шаблонная форма и Реактивная форма. Мы рассмотрим лучшие практики для создания удобных форм и проверок с помощью Angular 7. После этого мы рассмотрим все формы Angular, такие как формы, управляемые шаблонами и проверки реактивных форм с примерами. Мы увидим фундаментальные концепции Angular FormControl , FormGroup , FormBuilder , и различные типы встроенных валидаторов .
- Пример проверки формы Angular 7
- Проверка угловых форм на основе шаблонов
- # 1: установите Angular 7
- # 2: Шаблонная проверка формы Angular 7.
- Проверка формы на основе шаблонов Angular
- # 3: Angular 7 Reactive Form Validation Tutorial
- Reactive Forms
- Проверка реактивной формы Angular
- Проверка реактивной формы Angular
Пример проверки формы Angular 7
Прежде чем мы начнем Пример проверки формы Angular 7 , если вы новичок в Angular 7 Forms , ознакомьтесь с этим Примером руководства по Angular 7 Forms . Формы почти всегда присутствуют на любом веб-сайте, веб-приложении или мобильном приложении. Формы можно использовать для выполнения бесчисленных действий, таких как задачи ввода данных, такие как аутентификация , отправка заказа или создание профиля . Не будем забывать, что настоящая цель форм в веб-или мобильных приложениях — получить данные от пользователя. Как это всегда бывает при разработке программного обеспечения, существует множество различных способов отправки и обработки данных на вашем сервере.
Проверка угловых форм на основе шаблонов
Мы можем добавить проверку в форму, управляемую шаблоном; вы добавляете те же атрибуты проверки, что и при проверке собственной HTML-формы. Angular использует директивы для сопоставления этих атрибутов с функциями валидатора в системе. Каждый раз, когда значение элемента управления формы изменяется, Angular запускает проверку и генерирует либо список ошибок проверки, что приводит к статусу INVALID , либо к нулю, что приводит к ДЕЙСТВИТЕЛЬНЫЙ статус. Давайте возьмем пример, но сначала установите Angular 7.
# 1: установите Angular 7
Введите следующую команду для создания нового проекта Angular .
ng new ng7validation
Теперь войдите в папку ng7validation и откройте папку внутри VSCode .
cd ng7validationcode.
Теперь установите Bootstrap 4 CSS Framework , используя следующую команду.
npm install bootstrap --save
Теперь включите bootstrap 4 внутри файла angular.json внутри массива styles .
"styles": [" ./node_modules/bootstrap/dist/css/bootstrap.min.css "," src/styles.css "],
# 2: Шаблонная проверка формы Angular 7.
Внутри файла app.module.ts мы необходимо добавить
//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из @ angular/core '; импорт {FormsModule} из' @ angular/forms '; импорт {AppComponent} из' ./app.component '; @ NgModule ({декларации: [AppComponent], импорт: [BrowserModule, FormsModule], провайдеры : [], bootstrap: [AppComponent]}) экспортный класс AppModule {}
Теперь добавьте следующий код в файл app.component.ts .
//приложение. component.tsimport {Component} из '@ angular/core'; @ Component ({селектор: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css' ]}) класс экспорта AppComponent {data: any = {}; onSubmit () {предупреждение (JSON.stringify (this.data)); }}
Когда пользователь отправит форму, мы попадем сюда, а отсюда мы сможем отправить данные на сервер.
Теперь добавьте проверку внутри шаблона, который представляет собой файл app.component.ts .
Проверка формы на основе шаблонов Angular
Требуется имя .Имя должно содержать не менее 4 символов.Имя не может быть Боб.
Если есть ошибки проверки, то кнопка отправки отключена, если статус формы действителен, тогда вы можете отправить форму со значениями.
# 3: Angular 7 Reactive Form Validation Tutorial
Мы видели проверку формы на основе шаблонов Angular 7 ; теперь мы увидим Angular 7 Reactive Form Validation .
Reactive Forms
Реактивные формы — это метод Angular для создания форм в стиле реактивного . Угловые реактивные формы упрощают реактивный стиль программирования, который способствует явному управлению данными, передаваемыми между пользовательским интерфейсом. модель данных (обычно извлекаемая с сервера) и ориентированная на пользовательский интерфейс модель формы , которая сохраняет состояния элементов управления HTML-формой на экране. Реактивные формы предлагают нам простоту использования шаблонов реактивного программирования, тестирования и проверки. Давайте рассмотрим пример.
Теперь импортируйте ReactiveFormsModule внутри файла app.module.ts .
//app.module.tsimport {ReactiveFormsModule} из '@ angular/forms'; импорт: [BrowserModule, ReactiveFormsModule],
Теперь нам нужно написать код для файл app.component.ts . Помните, что это не шаблонная форма. Поэтому мы изменим код внутри файла app.component.ts .
Сначала мы импортируем FormGroup, FormBuilder, Validators модули из @ angular/forms .
Кроме того, создайте конструктор и создайте экземпляр FormBuilder .
//app.component.tsimport {Component} из '@ angular/core'; импорт {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Component ({selector: 'app-root' , templateUrl: './app.component.html', styleUrls: ['./app.component.css'ght})export class AppComponent {angForm: FormGroup; конструктор (частный fb: FormBuilder) {this.createForm (); } createForm () {this.angForm = this.fb.group ({имя: ['', Validators.required]}); }}
Мы использовали конструктор форм для обработки всей проверки. Итак, в этом конструкторе мы создаем форму с правилами проверки.
Теперь напишите следующий код внутри файла app.component.html .
Проверка реактивной формы Angular
Требуется имя.Значение формы: {{angForm.value | json}}
Статус формы: {{angForm.status | json}}
Сохраните файл, перейдите в браузер и посмотрите результат проверки со значениями.
Теперь наша полная форма выглядит так, как показано ниже, с кнопкой отправки.
Проверка реактивной формы Angular
Требуется имя.Значение формы: {{angForm.value | json}}
Статус формы : {{angForm.status | json}}
Наконец, Учебное пособие по проверке формы Angular 7 закончено. Спасибо за то, что приняли .
