Şablon Odaklı Formlar

Bu derste, basit formları hızlıca oluşturmanızı sağlayan Angular'daki şablon odaklı formlarla tanışacaksınız.

Şablon Odaklı Formlar Nedir?

Şablon odaklı formlar, form oluşturma, doğrulama ve gönderme işlemlerini kolayca yönetmek için HTML şablonlarını ve Angular yönergelerini kullanır.

FormsModule'u İçe Aktarma

Şablon odaklı formları kullanmak için FormsModule öğesini Angular modülünüze aktarın:

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

Basit Form Oluşturma

ngForm yönergesini kullanarak şablonunuzda basit bir form tanımlayın:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

ngModel ile İki Yönlü Veri Bağlama

ngModel, iki yönlü veri bağlama kullanarak form denetimlerini bileşen özelliklerine bağlar:

<input [(ngModel)]="user.name" name="username">

Form Gönderme

Angular'ın olay bağlamasını kullanarak form gönderimini kolayca yönetin:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Form Doğrulama

Angular, required ve minlength gibi kolay doğrulama yönergeleri sağlar:

<input name="username" ngModel required minlength="4">

Form Durumuna Erişme

Geçerlilik veya dokunulmuş olma durumu gibi form durumuna şablon değişkenleri üzerinden erişin:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Özet

Şablon odaklı formlarla formları kolayca oluşturmayı, bağlamayı, doğrulamayı ve göndermeyi öğrendiniz. Pratik yapmaya devam edin!