Что такое шаблонные формы?

Шаблонные формы (template-driven forms) в Angular — это один из способов работы с формами, который основывается на использовании HTML-шаблонов и встроенных директив Angular. Этот подход часто используется для простых и несложных форм, поскольку он позволяет легко связывать данные UI с моделью.

Основные концепции

1. Директивы Angular: Шаблонные формы используют директивы, такие как ngModel, для создания двустороннего связывания данных между объектом формы и элементами управления в шаблоне.
2. Модель формы: В шаблонных формах Angular формирует модель на основе структуры вашего шаблона. Вам не нужно явно создавать и управлять формами в коде TypeScript.
3. Импортирование необходимых модулей: Для использования шаблонных форм необходимо импортировать FormsModule из @angular/forms в модуле вашего приложения.

Пример использования

В следующем примере создадим простую форму для ввода имени и электронной почты.

Шаг 1: Импортируйте FormsModule

В вашем модуле (например, app.module.ts) импортируйте FormsModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Импорт
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // Добавьте здесь
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 2: Создайте шаблон формы

В компоненте (например, app.component.html) создайте HTML-код для формы:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" ngModel required>
  </div>
  <div>
    <label for="email">Электронная почта:</label>
    <input type="email" id="email" name="email" ngModel required>
  </div>
  <button type="submit" [disabled]="!userForm.valid">Отправить</button>
</form>

Шаг 3: Обработка формы в компоненте

В вашем компоненте (например, app.component.ts) определите метод для обработки отправки формы:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: any) {
    console.log('Форма отправлена!', form);
    // Здесь вы можете отправить данные на сервер или произвести другие действия
  }
}

Заключение

Шаблонные формы в Angular — это простой и удобный способ работы с формами, особенно для небольших приложений. Они позволяют вам сосредоточиться на разметке и предоставляют функциональность без необходимости управлять сложной логикой форм.

Изучив основные концепции и примеры работы с шаблонными формами, вы сможете легко интегрировать их в свои проекты и улучшить пользовательский интерфейс вашего приложения.