Skip to content

Latest commit

 

History

History
94 lines (64 loc) · 5.2 KB

forms.md

File metadata and controls

94 lines (64 loc) · 5.2 KB
Raw

Когда нужно использовать стандартные (template driven), а когда реактивные (reactive) формы?

Template driven формы можно использовать в тех случаях, когда нужно сделать небольшую форму или если приложение переходит с AngularJS на Angular (ngModel работает так же как ng-model в AngularJS). Во всех остальных случаях лучше использовать реактивные формы.
Преимущества реактивных форм:

  • Лучше масштабируются
  • Разделение бизнес и презентационной логики
  • Повышается читабельность кода
  • Проще поддерживать
  • Проще применять кастомную валидацию

Как отправить форму?

Нужно использовать ngSubmit чтобы слушать событие отправки формы. При сабмите формы будет вызываться соответствующий метод.

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()"></form>

В чем разница между NgForm, FormGroup, и FormControl?

Директива NgForm создает новую сущность FormGroup и байндит ее к элементу <form> шаблона, собирает все значения полей формы и следит за их изменениями и валидацией. При импорте Forms Module директива применяется по умолчанию ко всем тегам <form>. Применяется на уровне шаблона.

FormGroup собирает значения каждой дочерней FormControl в один объект, где ключами будут имена контроллеров полей формы.

FormControl следит за значением и валидацией одного конкретного контроллера формы.


В чем преимущество использования FormBuilder?

FormBuilder упрощает создание новых сущностей FormControl, FormGroup или FormArray. Сокращает количество кода, необходимого для создания сложных форм.


Как добавить валидацию к форме, сделанной с помощью FormBuilder?

Для валидации формы, созданной с помощью FormBuilder нужно:

  1. Импортировать валидаторы: 
import { Validators } from "@angular/forms";
  1. Добавить массив с валидаторами к контроллеру поля формы: 
this.contactForm = this.formBuilder.group({
	name: ["", [Validators.required, Validators.minLength(10)]],
	email: ["", [Validators.required, Validators.email]],
	country: ["", [Validators.required]],
});

В чем разница между состояниями dirty, touched и pristine?

dirty имеет значение true, если пользователь поменял значение поля формы. touched имеет значение true, если пользователь сделал активным (blur) поле ввода, но не менял значение поля формы. pristine имеет значение true, если пользователь вообще не трогал это поле формы.


Как получит доступ к ошибкам валидации, чтобы показать их в шаблоне?

У каждого поля формы в Angular есть свойство errors. К примеру, если мы задали валидацию Validators.required, то мы можем показать наш текст ошибки с помощью *ngIf: 

<div *ngIf="name.errors?.required">Обязательное поле</div>




Источники:

  1. https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
  2. https://angular.io/start/start-forms
  3. https://angular.io/api/forms/FormControl
  4. https://angular.io/api/forms/FormBuilder
  5. https://www.tektutorialshub.com/angular/angular-formbuilder-in-reactive-forms/#validations
  6. https://angular.io/guide/form-validation