Что такое Angular Forms и какие виды работы с формами существуют в Angular?

Что такое Angular Forms?

Angular Forms — это встроенный механизм для работы с пользовательским вводом, валидацией и отправкой данных. Они позволяют связывать HTML-формы с моделью данных в компоненте, обрабатывать события и проверять корректность введенных значений.

Два подхода к созданию форм

В Angular существует два основных способа работы с формами: Template-driven Forms и Reactive Forms. Выбор зависит от сложности формы и предпочтений разработчика.

Template-driven Forms

Этот подход основан на директивах в шаблоне, таких как ngModel. Форма создается прямо в HTML, а Angular автоматически связывает поля с моделью. Подходит для простых форм с минимальной логикой.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
      <input name="name" ngModel required>
      <button type="submit">Submit</button>
    </form>
  `
})
export class AppComponent {
  onSubmit(value: any) {
    console.log(value);
  }
}

Reactive Forms

Этот подход использует модель данных, созданную в компоненте с помощью FormControl, FormGroup и FormArray. Форма строится программно, что дает больше гибкости для сложной валидации и динамических полей.

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input formControlName="name">
      <button type="submit">Submit</button>
    </form>
  `
})
export class AppComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.required)
  });

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Когда что использовать?

• Template-driven Forms — для простых форм (логин, поиск), где не требуется сложная валидация или динамическое добавление полей.
• Reactive Forms — для сложных форм с множеством полей, кастомной валидацией, динамическими элементами и тестированием.

Вывод: Reactive Forms предпочтительнее для масштабируемых приложений, так как они более предсказуемы и легче тестируются. Template-driven Forms удобны для быстрых прототипов и простых сценариев.