Что такое FormControl в Angular?

Что такое FormControl?

FormControl — это фундаментальный класс в Angular, который представляет собой отдельный элемент управления в форме. Он отслеживает текущее значение поля ввода, его состояние (валидность, был ли он изменен, тронут и т.д.) и предоставляет API для программного управления этими аспектами. FormControl является частью модуля @angular/forms и используется в реактивных формах.

Как создать и использовать FormControl?

Для создания FormControl используется конструктор, который принимает начальное значение и массив валидаторов. Затем этот контрол связывается с элементом ввода в шаблоне с помощью директивы formControl.

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

@Component({
  selector: 'app-example',
  template: `
    <input [formControl]="nameControl">
    <div *ngIf="nameControl.invalid && nameControl.touched">
      Имя обязательно
    </div>
  `
})
export class ExampleComponent {
  nameControl = new FormControl('', [Validators.required]);

  constructor() {
    this.nameControl.valueChanges.subscribe(value => {
      console.log('Новое значение:', value);
    });
  }
}

Основные свойства и методы

• value — текущее значение контрола.
• valid / invalid — статус валидности.
• touched / untouched — был ли контрол активирован (фокус и потеря фокуса).
• dirty / pristine — изменял ли пользователь значение.
• errors — объект с ошибками валидации.
• setValue(value) — установить новое значение.
• patchValue(value) — частичное обновление (для FormGroup).
• reset() — сбросить контрол к начальному состоянию.

Применение

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

Вывод: FormControl — это основа реактивных форм в Angular, которая дает полный контроль над состоянием и валидацией отдельного поля. Его стоит применять в любом Angular-приложении, где требуется динамическое управление формами и сложная валидация.