Учебное пособие по проверке формы Angular 7

Учебное пособие по проверке форм в Angular 7 сегодня является ведущей темой. В Angular у нас есть два типа форм: Шаблонная форма и Реактивная форма. Мы рассмотрим лучшие практики для создания удобных форм и проверок с помощью Angular 7. После этого мы рассмотрим все формы Angular, такие как формы, управляемые шаблонами и проверки реактивных форм с примерами. Мы увидим фундаментальные концепции Angular FormControl , FormGroup , FormBuilder , и различные типы встроенных валидаторов .

Получите техническую степень и получите такие навыки, как разработка интерфейса или разработка Javascript, которые помогут вам начать карьеру. Ознакомьтесь с этой программой

Пример проверки формы 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 закончено. Спасибо за то, что приняли .

Оцените статью
nanomode.ru
Добавить комментарий