Просте пояснення реактивної форми в Angular.

переклад

Що таке реактивні форми в Angular?

Реактивна форма в Angular — це програмний і модельно-орієнтований підхід до створення форм. Вона надає повний контроль над введеннями форм, валідацією та загальною структурою форми, керуючи станами та даними форми в класі компонента, а не безпосередньо в шаблоні. Реактивні форми використовують RxJS Observables для відстеження змін введення в форму та стану валідації.

Ключові особливості реактивних форм:

1. Програмний контроль форми: Форми та валідація створюються та управляються в класі компонента.

2. Незмінний модель даних: Кожна зміна форми створює новий стан, що спрощує відстеження змін і керування станом форми.

3. Валідація: Підтримуються вбудовані та кастомні валідатори для синхронної та асинхронної валідації.

4. Динамічні форми: Форми можуть бути динамічно додані або видалені під час виконання.

Основні будівельні блоки реактивних форм:

1. FormControl: Представляє одне поле введення.

2. FormGroup: Групує кілька елементів форми в логічну структуру.

3. FormArray: Керує масивом елементів форми.

4. FormBuilder: Сервіс, який спрощує створення об'єктів FormGroup та FormControl.

Кроки для створення реактивної форми:

1. Імпортуємо ReactiveFormsModule: ReactiveFormsModule є основою для роботи з реактивними формами в Angular. Його потрібно імпортувати у ваш модуль, щоб увімкнути ін'єкцію залежностей для FormBuilder та забезпечити правильну роботу всіх реактивних директив (formControl, formGroup тощо).

1. У вашому component.html ви можете визначити структуру реактивної форми, зв'язавши форму з FormGroup, використовуючи директиву [formGroup]. Всередині форми кожне поле введення зв'язується з конкретним FormControl за допомогою директиви formControlName. Подія (ngSubmit) обробляє подання форми, викликаючи метод у вашому компоненті.

1. Повертаємось до вашого файлу ts і створюємо функцію onSubmit(), разом з імпортом FormBuilder у конструкторі.

FormBuilder — це сервіс, що надається ReactiveFormsModule в Angular, який спрощує створення та керування елементами форми в реактивних формах. Оголошення його в конструкторі, як у constructor(private fb: FormBuilder), важливе з таких причин:

1. Ін'єкція залежностей:
   Додавши FormBuilder до конструктора, система ін'єкції залежностей Angular надає екземпляр FormBuilder для вашого компонента. Це усуває необхідність вручну створювати та керувати його екземпляром.

2. Спрощення створення форми:
   FormBuilder надає зручні методи (group, control, array) для створення груп форм, елементів форм та масивів форм з меншою кількістю рядків коду. Наприклад:

this.myForm = this.fb.group({
name: [‘’, Validators.required],
age: [null, [Validators.required, Validators.min(1)]],
});

Без FormBuilder, та сама форма вимагала б більш багатослівного коду:

this.myForm = new FormGroup({
name: new FormControl(‘’, Validators.required),
age: new FormControl(null, [Validators.required, Validators.min(1)]),
});

1. Покращення читабельності коду:
   Використання FormBuilder робить код більш лаконічним та легшим для розуміння, особливо для форм з багатьма елементами або складними правилами валідації.
   переклад

Сприяє повторному використанню:
Екземпляр FormBuilder може бути використаний у всьому компоненті для динамічного створення та керування формами.

Коротко кажучи, включення FormBuilder в конструктор використовує ін'єкцію залежностей Angular для спрощення керування формами, підвищення читабельності та зменшення кількості шаблонного коду.

Як виглядатиме ваш ts файл;

Виведення

Перекладено з: A Simple Explanation On Reactive Form In Angular.