Formulir Berbasis Templat

Pelajaran ini memperkenalkan formulir berbasis templat di Angular, yang memungkinkan Anda membuat formulir sederhana dengan cepat.

Apa Itu Formulir Berbasis Templat?

Formulir berbasis templat menggunakan templat HTML dan direktif Angular untuk menangani pembuatan, validasi, dan pengiriman formulir dengan mudah.

Mengimpor FormsModule

Untuk menggunakan formulir berbasis templat, impor FormsModule ke modul Angular Anda:

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

Membuat Formulir Sederhana

Tentukan formulir sederhana di templat menggunakan direktif ngForm:

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

Pengikatan Dua Arah dengan ngModel

ngModel mengikat kontrol formulir ke properti komponen menggunakan pengikatan data dua arah:

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

Pengiriman Formulir

Tangani pengiriman formulir dengan mudah menggunakan pengikatan peristiwa Angular:

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

Validasi Formulir

Angular menyediakan direktif validasi yang mudah digunakan, seperti required dan minlength:

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

Mengakses Status Formulir

Akses status formulir, seperti validitas atau status sudah disentuh, melalui variabel templat:

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

Ringkasan

Anda telah mempelajari cara membuat, mengikat, memvalidasi, dan mengirim formulir dengan mudah menggunakan formulir berbasis templat. Teruslah berlatih!