Как работать с ngModel?

С ngModel - это директива в Angular, которая позволяет связать данные модели с элементом управления в пользовательском интерфейсе. Она позволяет вам создавать двунаправленную привязку данных, что означает, что любые изменения в элементе управления будут отражаться в связанной модели данных, и наоборот.

Для работы с ngModel нужно выполнить несколько шагов:

1. Импортировать формы и ReactiveFormsModule модули в вашем AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Используйте ngModel в шаблоне компонента для привязки данных:

<input [(ngModel)]="myProperty" type="text">

В приведенном выше примере myProperty будет связан с значением, введенным в поле ввода. Любое изменение значения в поле ввода будет автоматически отражаться в myProperty и наоборот.

3. Важно отметить, что для использования ngModel вам также понадобится указать атрибут name для элемента управления:

<input [(ngModel)]="myProperty" name="myInput" type="text">

Атрибут name позволяет Angular отслеживать и управлять элементом управления в контексте формы.

4. Вы также можете использовать ngModel с другими элементами управления, такими как радиокнопки и флажки. В этом случае значение myProperty будет обновляться в соответствии с состоянием элемента управления.

5. Вы можете добавить валидацию к значению, связанному с ngModel, с помощью стандартных встроенных директив Angular, таких как required, minlength, maxlength и т. д.

<input [(ngModel)]="myProperty" name="myInput" type="text" required minlength="3" maxlength="10">

Это соответствует значению ngModel на основе встроенных правил валидации и отображает ошибку валидации, если значение не соответствует этим правилам.

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