Реактивные формы в Angular — это мощный подход к созданию форм, который позволяет управлять состоянием форм и их валидацией через Reactive Programming (реактивное программирование). Этот подход предоставляет разработчику возможность создавать сложные формы с более сложной логикой валидации и управления состоянием.

Реактивные формы в отличие от模板ных форм (Template-driven forms) требуют от разработчика явного определения структуры формы и ее поведения в коде. Это делает реактивные формы более предсказуемыми и тестируемыми.

Основные компоненты реактивных форм

FormGroup – представляет собой группу полей формы.

FormControl – представляет одно поле формы и содержит его значение и состояние.

FormArray – представляет собой массив экземпляров FormControl и/или FormGroup, позволяя создавать динамические формы.

Как создать реактивную форму

Импортируйте ReactiveFormsModule в ваш модуль:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [/* ваши компоненты */],
  imports: [
    ReactiveFormsModule
    // другие модули
  ],
  bootstrap: [/* ваш корневой компонент */]
})
export class AppModule { }

Создайте форму в компоненте:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-demo-form',
  templateUrl: './demo-form.component.html'
})
export class DemoFormComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(3)]),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required, Validators.minLength(6)])
    });
  }

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

Создайте HTML-шаблон для формы:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Имя:</label>
    <input id="name" formControlName="name">
    <div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched">
      <small>Имя обязательно и должно содержать минимум 3 символа.</small>
    </div>
  </div>
  
  <div>
    <label for="email">Электронная почта:</label>
    <input id="email" formControlName="email">
    <div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
      <small>Неправильный формат электронной почты.</small>
    </div>
  </div>
  
  <div>
    <label for="password">Пароль:</label>
    <input type="password" id="password" formControlName="password">
    <div *ngIf="myForm.get('password')?.invalid && myForm.get('password')?.touched">
      <small>Пароль обязателен и должен содержать минимум 6 символов.</small>
    </div>
  </div>

  <button type="submit" [disabled]="myForm.invalid">Отправить</button>
</form>

Заключение

Реактивные формы — это мощный инструмент в Angular, который помогает более детально управлять формами и их состоянием. Понимание основ FormGroup, FormControl и FormArray, а также умение создавать и валидировать формы, существенно улучшат ваши навыки в разработке с использованием Angular.

Предыдущий вопрос

Какова цель директивы ngIf?

Следующий вопрос

Какие различия между реактивными формами и формами на основе шаблонов?

Содержание:

Основные компоненты реактивных форм

Как создать реактивную форму

Заключение

Редактировать