Angular для новичков: Динамическое редактирование форм

Создание форм для редактирования данных

Создадим формы для редактирования данных автомобиля: название, модель, скорость, цвет кузова, цвет салона и цвет колёс. Эти формы обеспечат динамическое изменение данных без вызова отдельных методов. Пользовательский ввод будет непосредственно отображаться в свойствах компонента, изменяя данные в реальном времени.

Для начала скопируем ранее созданную форму и добавим поля ввода:

Название машины (placeholder="Название машины")
Модель машины (placeholder="Модель машины")
Скорость машины (type="number")
Цвет автомобиля (placeholder="Цвет машины")
Цвет салона (placeholder="Цвет салона")
Цвет колёс (placeholder="Цвет колёс")

Между полями добавим отступы для улучшения читаемости.

Подключение модуля FormsModule

Для динамического обновления данных подключим модуль FormsModule. Импортируем его в .module.ts:

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

@NgModule({
  imports: [
    // ... другие импорты
    FormsModule,
  ],
  // ... остальной код
})
export class AppModule { }

Путь импорта: @angular/forms. Подключение FormsModule позволяет создавать динамические поля ввода. После добавления модуля, визуальных изменений на странице пока не будет.

Динамическое связывание данных с помощью ngModel

В HTML-шаблоне используем директиву ngModel для динамического связывания данных. Например, для поля «Название машины»:

<input type="text" [(ngModel)]="car.name" name="name" placeholder="Название машины">

[(ngModel)]="car.name" связывает значение поля ввода со свойством name объекта car. Атрибут name необходим для корректной обработки данных. Изменения в поле ввода мгновенно отражаются на значении переменной car.name.

Аналогично свяжем остальные поля:

Модель: <input type="text" [(ngModel)]="car.model" name="model" placeholder="Модель машины">
Скорость: <input type="number" [(ngModel)]="car.speed" name="speed" placeholder="Скорость">
Цвет автомобиля: <input type="text" [(ngModel)]="car.colors.car" name="colors.car" placeholder="Цвет машины">
Цвет салона: <input type="text" [(ngModel)]="car.colors.salon" name="colors.salon" placeholder="Цвет салона">
Цвет колёс: <input type="text" [(ngModel)]="car.colors.wheels" name="colors.wheels" placeholder="Цвет колёс">

Все значения подставляются автоматически, изменения в полях мгновенно обновляют переменные. Переключение на другой объект также корректно обновляет данные в форме.

Управление отображением формы

Добавим стили, например, container { margin: 50px; }. Также добавим кнопку для отображения/скрытия формы. Создадим кнопку «Редактировать» и переменную isEdit: boolean = false в компоненте. При нажатии на кнопку, значение isEdit инвертируется (this.isEdit = !this.isEdit). В HTML-шаблоне используем условие для отображения формы:

<button (click)="isEdit = !isEdit">Редактировать</button>
<div *ngIf="isEdit">
  <!-- Форма для редактирования -->
</div>

Мы освоили работу с модулем FormsModule и создали динамические поля ввода для изменения переменных в реальном времени. Мы также научились управлять отображением формы с помощью кнопки и переменной состояния.