Binding Dua Arah dengan ngModel
Sinkronkan input formulir dengan keadaan komponen.
Binding Dua Arah dengan ngModel adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Apa Itu Pengikatan Dua Arah?
Pengikatan dua arah menjaga nilai tetap selaras antara komponen dan tampilan: memperbarui salah satunya akan memperbarui yang lain. Sintaksnya adalah pisang-dalam-kotak [()].
Pisang dalam Kotak
Sintaks gabungan [(...)] adalah singkatan dari pengikatan properti dan pengikatan peristiwa. Tanda kurung siku adalah kotaknya, sedangkan tanda kurung adalah pisangnya.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Memperkenalkan ngModel
ngModel adalah direktif untuk pengikatan dua arah pada kontrol formulir seperti input, pilihan, dan area teks.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Mengimpor FormsModule
Untuk menggunakan ngModel, Anda harus mengimpor FormsModule di komponen mandiri atau NgModule Anda.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Mengikat Input Teks
Saat pengguna mengetik, properti yang terikat segera diperbarui, dan perubahan pada properti melalui kode akan memperbarui input.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Mengikat Kotak Centang
ngModel berfungsi dengan kotak centang dan mengikatnya ke nilai boolean.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Mengikat Pilihan
Pada elemen pilihan, ngModel mengikat ke nilai opsi yang dipilih.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel di Dalam Formulir
Di dalam formulir yang digerakkan templat, tambahkan atribut name agar Angular mendaftarkan kontrol tersebut ke formulir.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel Mandiri
Di luar formulir, ngModel dapat digunakan sendiri selama FormsModule diimpor; name tidak diperlukan.
<input [(ngModel)]="search">Kapan Menggunakan ngModel
ngModel sangat cocok untuk formulir sederhana yang digerakkan templat. Untuk validasi kompleks dan formulir dinamis, formulir reaktif sering lebih disarankan.
Merespons Perubahan
Jika Anda hanya perlu merespons perubahan, ikat peristiwa (ngModelChange) secara langsung, bukan menggunakan pengikatan dua arah penuh.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Pemeriksaan Singkat
Uji pemahaman Anda tentang pengikatan dua arah ngModel.
Ringkasan
Pengikatan dua arah menggunakan sintaks pisang-dalam-kotak [(ngModel)], yang menggabungkan pengikatan properti dan peristiwa. Impor FormsModule untuk menggunakannya pada input, kotak centang, dan pilihan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Binding Dua Arah dengan ngModel” gratis?
Ya — teks lengkap “Binding Dua Arah dengan ngModel” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Binding Dua Arah dengan ngModel”?
Sinkronkan input formulir dengan keadaan komponen. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Binding Dua Arah dengan ngModel” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Rangkuman Binding Properti dan Peristiwa
- Binding Dua Arah dengan ngModel
- Input Sinyal model()
- Properti Kustom yang Dapat Diikat Dua Arah