Angular Academy · Ders

ngModel ile İki Yönlü Bağlama

Form input'larını bileşen durumuyla eşitleyin.

ngModel ile İki Yönlü Bağlama, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

İki Yönlü Bağlama Nedir?

İki yönlü bağlama, bir bileşen ile görünüm arasındaki değeri eşit tutar: biri güncellendiğinde diğeri de güncellenir. Söz dizimi, kutu içindeki muz [()] şeklindedir.

Kutu İçindeki Muz

Birleşik [(...)] söz dizimi, özellik bağlama ile olay bağlamanın kısa yazımıdır. Köşeli parantezler kutuyu, normal parantezler muzu oluşturur.

<!-- shorthand -->
<input [(ngModel)]="name">

<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">

ngModel'e Giriş

ngModel, girdiler, seçim kutuları ve metin alanları gibi form denetimlerinde iki yönlü bağlama sağlayan bir yönergedir.

<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>

FormsModule'u İçe Aktarma

ngModel kullanmak için FormsModule öğesini bağımsız bileşeninize veya NgModule'unuza içe aktarmanız gerekir.

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

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [FormsModule],
  template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
  name = "";
}

Metin Girdisini Bağlama

Kullanıcı yazdıkça bağlı özellik hemen güncellenir; özelliğin kod içinde değiştirilmesi de girdiyi günceller.

<input [(ngModel)]="email">
<p>Current: {{ email }}</p>

Onay Kutusunu Bağlama

ngModel, onay kutularıyla çalışır ve bir doğru/yanlış değerine bağlanır.

<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>

// component
agreed = false;

Seçim Kutusunu Bağlama

Bir seçim öğesiyle ngModel, seçilen seçeneğin değerine bağlanır.

<select [(ngModel)]="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>

Formların İçinde ngModel

Şablon odaklı bir formun içinde, Angular'ın denetimi forma kaydetmesi için bir name özniteliği ekleyin.

<form #f="ngForm">
  <input name="city" [(ngModel)]="city">
</form>

Bağımsız ngModel

Bir formun dışında ngModel, FormsModule içe aktarıldığı sürece tek başına çalışır; name gerekmez.

<input [(ngModel)]="search">

ngModel Ne Zaman Kullanılmalı?

ngModel, basit şablon odaklı formlarda çok kullanışlıdır. Karmaşık doğrulamalar ve dinamik formlar için genellikle reaktif formlar tercih edilir.

Değişikliklere Tepki Verme

Yalnızca değişikliklere tepki vermeniz gerekiyorsa, tam iki yönlü bağlama kullanmak yerine (ngModelChange) olayını doğrudan bağlayın.

<input [ngModel]="q" (ngModelChange)="onSearch($event)">

Kısa Kontrol

ngModel iki yönlü bağlamayı anlayıp anlamadığınızı test edin.

Özet

İki yönlü bağlama, özellik ve olay bağlamayı birleştiren kutu içindeki muz [(ngModel)] söz dizimini kullanır. Girdilerde, onay kutularında ve seçim kutularında kullanmak için FormsModule öğesini içe aktarın.

Sıkça Sorulan Sorular

“ngModel ile İki Yönlü Bağlama” dersi ücretsiz mi?

Evet — “ngModel ile İki Yönlü Bağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“ngModel ile İki Yönlü Bağlama” dersinde ne öğreneceğim?

Form input'larını bileşen durumuyla eşitleyin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“ngModel ile İki Yönlü Bağlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön