Двустороннее связывание с ngModel
Синхронизируйте поля формы с состоянием компонента.
«Двустороннее связывание с ngModel» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что такое двусторонняя привязка
Двусторонняя привязка синхронизирует значение между компонентом и представлением: изменение одного приводит к изменению другого. Её синтаксис — «банан в коробке» [()].
Банан в коробке
Объединённый синтаксис [(...)] — это сокращение для привязки свойства и привязки события. Скобки образуют коробку, а круглые скобки — банан.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Знакомство с ngModel
ngModel — директива для двусторонней привязки элементов форм, таких как поля ввода, списки выбора и многострочные поля.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Импорт FormsModule
Чтобы использовать ngModel, необходимо импортировать FormsModule в автономный компонент или NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Привязка текстового поля
По мере ввода текста пользователем связанное свойство обновляется сразу, а изменение свойства в коде обновляет поле ввода.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Привязка флажка
ngModel работает с флажками, связывая их со значением типа «логический».
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Привязка списка выбора
Для элемента списка выбора ngModel связывается со значением выбранного варианта.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel внутри форм
В форме, управляемой шаблоном, добавьте атрибут name, чтобы Angular зарегистрировал элемент управления в форме.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>Автономный ngModel
Вне формы ngModel работает самостоятельно, если импортирован FormsModule; атрибут name не требуется.
<input [(ngModel)]="search">Когда использовать ngModel
ngModel особенно удобен для простых форм, управляемых шаблоном. Для сложной проверки и динамических форм часто предпочитают реактивные формы.
Реакция на изменения
Если Вам нужно только реагировать на изменения, привяжите событие (ngModelChange) напрямую вместо использования полной двусторонней привязки.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Быстрая проверка
Проверьте, насколько хорошо Вы поняли двустороннюю привязку ngModel.
Итоги
Двусторонняя привязка использует синтаксис «банан в коробке» [(ngModel)], объединяющий привязку свойства и события. Импортируйте FormsModule, чтобы использовать её с полями ввода, флажками и списками выбора.
Часто задаваемые вопросы
Урок «Двустороннее связывание с ngModel» бесплатный?
Да — полный текст урока «Двустороннее связывание с ngModel» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Двустороннее связывание с ngModel»?
Синхронизируйте поля формы с состоянием компонента. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Двустороннее связывание с ngModel»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Повторение связывания свойств и событий
- Двустороннее связывание с ngModel
- Входные сигналы model()
- Пользовательские свойства с двусторонним связыванием