Pengenalan Form di Angular 4: Template-Driven Forms

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Form sangat penting untuk aplikasi front-end modern manapun, dan ini adalah fitur yang kita gunakan setiap hari, bahkan jika tidak menyadarinya. Form diperlukan untuk login dengan aman di pengguna ke aplikasi, mencari semua hotel yang ada di kota tertentu, memesan taksi, membuat daftar tugas, dan melakukan banyak hal lain yang biasa kita lakukan. Beberapa form hanya memiliki beberapa field input, sedangkan bentuk lainnya bisa memiliki field suatu array yang membentang ke beberapa halaman atau tab.

Dalam tutorial ini, kita akan membahas strategi yang berbeda yang tersedia untuk mengembangkan form di Angular. Terlepas dari strategi yang kamu pilih, berikut adalah hal-hal yang harus disertakan oleh library;

Dukung pengikatan dua-arah sehingga nilai kontrol input disinkronkan dengan state komponen.
Lacak keadaan form dan gunakan isyarat visual agar pengguna tahu apakah keadaan saat ini benar atau tidak. Misalnya, jika nama pengguna memiliki karakter yang tidak valid, border merah harus muncul di sekitar kolom input untuk username.
Memiliki mekanisme untuk menampilkan validasi error dengan benar.
Mengaktifkan atau menonaktifkan bagian-bagian tertentu dari form kecuali beberapa kriteria validasi terpenuhi.

Pengenalan Form di Angular

Sudut, menjadi framework front-end penuh, memiliki kumpulan library tersendiri untuk membangun form yang kompleks. Versi terbaru dari Angular memiliki dua strategi pembuatan form yang powerful. Mereka adalah:

template-driven forms
model-driven atau reactive forms

Kedua teknologi tersebut milik libary @angulat/forms dan didasarkan pada class kontrol form yang sama. Namun, mereka sangat berbeda dalam filosofi, gaya pemrograman, dan teknik mereka. Memilih satu dari yang lain tergantung pada selera pribadimu dan juga pada kompleksitas form yang ingin kamu ciptakan. Menurut pendapat saya, kamu harus mencoba kedua pendekatan terlebih dahulu dan kemudian memilih yang sesuai dengan gaya dan proyek yang kamu hadapi.

Bagian pertama dari tutorial ini akan mencakup template-driven forms dengan contoh praktis: membuat form pendaftaran dengan validasi untuk semua field form. Pada bagian kedua dari tutorial ini, kita akan menelusuri kembali langkah-langkah untuk membuat form bentuk yang sama dengan menggunakan pendekatan model-driven.

Template-Driven Forms

Pendekatan template-driven adalah strategi yang dipinjam dari era AngularJS. Menurut pendapat saya, ini adalah metode paling sederhana untuk membuat form. Bagaimana cara kerjanya? Kita akan menggunakan beberapa directive Angular.

Directive memungkinkanmu untuk melampirkan tindakan ke elemen di DOM.
— Dokumentasi Angular

Angular menyediakan directive spesifik-form yang bisa kamu gunakan untuk mengikat data inputan form dan model. Directive spesifik-form menambahkan fungsionalitas dan tindakan ekstra ke bentuk HTML biasa. Hasil akhirnya adalah bahwa template menangani nilai-nilai yang mengikat dengan model dan validasi form.

Dalam tutorial ini, kita akan menggunakan template-driven forms untuk membuat halaman pendaftaran aplikasi. Form akan mencakup elemen form yang paling umum dan pemeriksaan validasi yang berbeda pada elemen formulir ini. Berikut adalah langkah-langkah yang akan anda ikuti di tutorial ini.

Tambahkan FormsModule ke app.module.ts.
Buat suatu class untuk model User.
Buat komponen dan layout awal untuk form pendaftaran.
Gunakan directive form Angular seperti ngModel, ngModelGroup, dan ngForm.
Tambahkan validasi menggunakan validator bawaan.
Tampilkan error validasi dengan penuh makna.
Tangani pengiriman formulir menggunakan ngSubmit.

Mari kita mulai.

Prasyarat

Kode untuk proyek ini tersedia di repo GitHub saya. Download zip atau kloning repo untuk melihatnya beraksi. Jika kamu lebih memilih untuk memulai dari awal, pastikan kamu telah menginstal CLI Angular. Gunakan perintah ng untuk membuat proyek baru.

1	$ ng new SignupFormProject

Selanjutnya, buat komponen baru untuk SignupForm.

1	ng generate component SignupForm

Ganti isi app.component.html dengan ini:

1	<app-signup-form> </app-signup-form>

Berikut adalah struktur direktori untuk direktori src/. Saya telah menghapus beberapa file yang tidak penting agar semuanya tetap sederhana.

.
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── signup-form
│   │   ├── signup-form.component.css
│   │   ├── signup-form.component.html
│   │   └── signup-form.component.ts
│   └── User.ts
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── tsconfig.app.json
└── typings.d.ts

Seperti yang dapat kamu lihat, sebuah direktori untuk komponen SignupForm telah dibuat secara otomatis. Di situlah sebagian besar kode kita akan tertuju. Saya juga telah membuat User.ts baru untuk menyimpan model User kita.

Template HTML

Sebelum kita menyelami template komponen yang sebenarnya, kita perlu memiliki gagasan abstrak tentang apa yang sedang kita bangun. Jadi, inilah bentuk struktur yang ada dalam pikiran saya. Form pendaftaran akan memiliki beberapa field inputan, elemen select, dan elemen checkbox.

The HTML Template

Berikut adalah template HTML yang akan kita gunakan untuk halaman registrasi kita.

Template HTML

 <div class="row custom-row">
  <div class= "col-sm-5 custom-container jumbotron">
      
    <form class="form-horizontal">
        <fieldset>
        <legend>SignUp</legend>
        
            <!--- Email Block --->
            <div class="form-group">
    	      <label for="inputEmail">Email</label>
    		  <input type="text"
                id="inputEmail"
    	        placeholder="Email">
    	   	</div>
            <!--- Password Block --->
    	   	<div class="form-group">
    	      <label for="inputPassword">Password</label>
    	      <input type="password" 
                id="inputPassword"
                placeholder="Password">
    	    </div>
    
    	    <div class="form-group">
    	      <label for="confirmPassword" >Confirm Password</label>
    	      <input type="password" 
                id="confirmPassword"
                placeholder="Password">
    	    </div>
            
            <!--- Select gender Block --->
    	    <div class="form-group">
    	      <label for="select">Gender</label>
    	        <select id="select">
    	          <option>Male</option>
    	          <option>Female</option>
    	          <option>Other</option>
    	        </select>
    	    </div>
            
            <!--- Terms and conditions Block --->
             <div class="form-group checkbox">
              <label>
                <input type="checkbox"> Confirm that you've read the Terms and 
                Conditions
              </label>
            </div>
    	   
           <!--- Buttons Block --->
    	    <div class="form-group">
    	        <button type="reset" class="btn btn-default">Cancel</button>
    	        <button type="submit" class="btn btn-primary">Submit</button>
    	    </div>
    	</fieldset>
    </form>
  </div>
</div>

Class CSS yang digunakan dalam template HTML adalah bagian dari library Bootstrap yang digunakan untuk membuat semuanya menjadi menarik. Karena ini bukan tutorial desain, saya tidak akan banyak membicarakan aspek CSS dari form kecuali jika diperlukan.

Dasar Pengaturan Form

Untuk menggunakan directive template-driven form, kita perlu mengimpor FormsModule dar @angular/forms dan menambahkannya ke array imports di app.module.ts.

app/app.module.ts

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

@NgModule({
 .
 .
 imports: [
    BrowserModule,
    FormsModule
  ],
  .
  .
})
export class AppModule { }

Selanjutnya, buat class yang akan menampung semua properti entitas User. Kita bisa menggunakan antarmuka dan menerapkannya di komponen atau menggunakan kelas TypeScript untuk modelnya.

app/User.ts

export class User {

    id: number;
    email: string;
    //Both the passwords are in a single object
	password: { 
	  pwd: string;
	  confirmPwd: string;
	};
	gender: string;
    terms: boolean;

	constructor(values: Object = {}) {
	  //Constructor initialization
      Object.assign(this, values);
  }

}

Sekarang, buat sebuah instance dari class di komponen SignupForm. Saya juga telah mendeklarasikan sebuah properti tambahan untuk jenis kelamin.

app/signup-form/signup-form.component.ts

import { Component, OnInit } from '@angular/core';
// Import the User model
import { User } from './../User';

@Component({
  selector: 'app-signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent implements OnInit {

  //Property for the gender
  private gender: string[];
  //Property for the user
  private user:User;

  ngOnInit() {

    this.gender =  ['Male', 'Female', 'Others'];
    //Create a new user object
    this.user = new User({
        email:"", password: { pwd: "" , confirm_pwd: ""}, 
        gender: this.gender[0], terms: false});
    }

}

Untuk file signup-form.component.html, saya akan menggunakan template HTML yang sama yang dibahas di atas, namun dengan sedikit perubahan. Form pendaftaran memiliki files select dengan daftar opsi. Meskipun itu berhasil, kita akan melakukannya dengan cara Angular dengan melakukan perulangan pada daftar menggunakan directive ngFor.

app/signup-form/signup-form.component.html

<div class="row custom-row">
  <div class= "col-sm-5 custom-container jumbotron">
      
    <form class="form-horizontal">
        <fieldset>
          <legend>SignUp</legend>
.
.
            <!--- Gender Block -->
            <div class="form-group">
              <label for="select">Gender</label>
        	       <select id="select">
        	         
        	         <option *ngFor = "let g of gender" 
        	           [value] = "g"> {{g}} 
        	         </option>
        	       </select>
        	   </div>
.
.
    </fieldset>
    </form>
  </div>
</div>

Selanjutnya, kita ingin mengikat data form ke objek class user sehingga ketika kamu memasukkan data pendaftaran ke dalam form, objek User baru dibuat yang menyimpan data sementara. Dengan cara ini, kamu dapat menjaga view tetap sinkron dengan model, dan ini disebut binding.

Ada beberapa cara untuk mewujudkannya. Izinkan saya mengenalkanmu pada ngModel dan ngForm.

ngForm dan ngModel

ngForm dan ngModel adalah directive Angular yang penting untuk membuat template-driven forms. Mari kita mulai dengan ngForm dulu. Berikut adalah kutipan tentang ngForm dari dokumentasi Angular.

Directive NgForm melengkapi elemen form dengan fitur tambahan. Ini memegang kendali yang kamu buat untuk elemen dengan directive ngModel dan atribut name, dan memonitor properti mereka, termasuk keabsahannya. Ini juga memiliki properti valid sendiri yang mana hanya benar jika setiap kontrol yang terkandung itu benar.

Pertama, perbarui form dengan directive ngForm:

app/signup-form/signup-form.component.html

<form 
  class="form-horizontal"  
  #signupForm = "ngForm">
.
.
</form>

#signupForm adalah variabel referensi template yang mengacu pada directive ngForm yang mengatur keseluruhan form. Contoh di bawah ini menunjukkan penggunaan objek referensi ngForm untuk validasi.

app/signup-form/signup-form.component.html

<button 
   type="submit" 
   class="btn btn-success" 
   [disabled]="!signupForm.form.valid"> 
     Submit
</button>

Di sini, signupForm.form.valid akan mengembalikan nilai false kecuali semua form lolos dari masing-masing pemeriksaan validasi. Tombol submit akan dinonaktifkan sampai form telah valid.

Seperti untuk mengikat template dan modelnya, ada banyak cara untuk melakukan ini, dan ngModel memiliki tiga sintaks yang berbeda untuk mengatasi situasi ini. Mereka adalah:

[(ngModel)]
[(ngModel)]
ngModel

Mari kita mulai dengan yang pertama.

Two-Way Binding Menggunakan [(ngModel)]

[(ngModel)] melakukan two-way binding untuk membaca dan menulis nilai kontrol inputan. Jika directive [(ngModel)] digunakan, field inputan mengambil nilai awal dari class komponen yang terikat dan memperbaruinya kembali setiap kali ada perubahan pada nilai kontrol inputan yang terdeteksi (pada penekanan keyboard dan tombol tekan). Gambar di bawah menggambarkan proses two-way binding dengan lebih baik.

Berikut adalah kode untuk field inputan email:

    <div class="form-group">
      <label for="inputEmail">Email</label>
	  <input type="text" 
	    [(ngModel)] = "user.email"
        id="inputEmail" 
        name="email"
        placeholder="Email">
   	</div>

[(ngModel)] = "user.email" mengikat properti email pengguna ke nilai inputan. Saya juga menambahkan atribut name dan menetapkan name ="email". Ini penting, dan kamu akan mendapatkan error jika kamu tidak menyatakan atribut nama saat menggunakan ngModel.

Demikian pula, tambahkan [(ngModel)] dan atribut name unik ke setiap elemen form. Formulirmu akan terlihat seperti ini sekarang:

app/signup-form/signup-form.component.html

.
.
.
	  <div ngModelGroup="password">
	   	<div class="form-group" >
	      <label for="inputPassword">Password</label>
	      <input type="password"
	       [(ngModel)] = "user.password.pwd" name="pwd"
           placeholder="Password">
	    </div>

	    <div class="form-group">
	      <label for="confirmPassword" >Confirm Password</label>
	      <input type="password" 
	        [(ngModel)] = "user.password.confirmPwd"  name="confirmPwd"
            placeholder="Confirm Password">
	    </div>
		</div>
	    <div class="form-group">
	      <label for="select">Gender</label>
	        <select id="select"
	          [(ngModel)] = "user.gender" name = "gender">
	          
	          <option *ngFor = "let g of gender" 
	            [value] = "g"> {{g}} 
	          </option>
	        </select>
	    </div>
        
     .
     .
     .

ngModelGroup digunakan untuk mengelompokkan field form yang sama sehingga kita dapat menjalankan validasi hanya pada field form tersebut. Karena kedua field password itu terkait, kita akan menempatkannya di bawah satu ngModelGroup. Jika semuanya bekerja seperti yang diharapkan, properti user yang terikat komponen harus bertanggung jawab untuk menyimpan semua nilai kontrol form. Untuk melihat ini beraksi, tambahkan berikut ini setelah tag form:

1	{{user \| json}}

Salurkan properti pengguna melalui JsonPipe untuk membuat model sebagai JSON di browser. Ini sangat membantu untuk debugging dan logging. Kamu seharusnya melihat output JSON seperti ini.

Nilainya mengalir dari form ke model. Bagaimana sebaliknya? Cobalah menginisialisasi objek pengguna dengan beberapa nilai.

app/signup-form/signup-form.component.ts

this.user = new User({
    //initialized with some data
    email:"thisisfromthemodel@example.com", 
    password: { pwd: "" , confirm_pwd: ""}, 
    gender: this.gender[0]
    
    });

Dan mereka otomatis akan muncul di view:

1	{ "email": "thisisfromthemodel@example.com",
2	"password": { "pwd": "", "confirm_pwd": "" },
3	"gender": "Male"
4	}

Two-way binding [(ngModel)] membantumu membuat form dengan mudah. Namun, ada kekurangan tertentu; Oleh karena itu, ada pendekatan alternatif yang menggunakan ngModel atau [ngModel].

Menambahkan ngModel ke Mix

Saat ngModel digunakan, sebenarnya kita bertanggung jawab untuk memperbarui properti komponen dengan nilai kontrol inputan dan sebaliknya. Data inputan tidak secara otomatis mengalir ke dalam komponen properti pengguna.

Jadi ganti semua instance [(ngModel)] = " " dengan ngModel. Kita akan menyimpan atribut name karena ketiga versi ngModel memerlukan atribut name untuk dapat bekerja.

app/signup-form/signup-form.component.html

<div class="form-group">
          <label for="inputEmail">Email</label>
		  <input type="text" 
		    ngModel
            id="inputEmail" 
            name="email"
	        placeholder="Email">
	   	</div>

Dengan ngModel, nilai atribut nama akan menjadi kunci dari objek referensi ngForm signupForm yang telah kita buat tadi. Jadi, misalnya, signupForm.value.email akan menyimpan nilai kontrol untuk id email.

Ganti {{user | json}} dengan {{signupForm.value | json}} karena di situlah semua state disimpan sekarang.

One-Way Binding Menggunakan [ngModel]

Bagaimana jika kamu perlu mengatur keadaan awal dari komponen class yang terikat? Itulah yang [ngModel] lakukan untukmu.

Di sini data mengalir dari model ke view. Buat perubahan berikut pada sintaks untuk menggunakan one-way binding:

app/signup-form/signup-form.component.html

<div class="form-group">
      <label for="inputEmail">Email</label>
      <input type="text" 
        [ngModel] = "user.email"
        id="inputEmail" 
        name="email"
        placeholder="Email">
</div>

Jadi pendekatan mana yang harus kamu pilih? Jika kamu menggunakan [(ngModel)] dan ngForm bersama-sama, kamu akhirnya akan memiliki dua state untuk dipertahankan—user dan signupForm.value—dan itu bisa berpotensi membingungkan.

{ "email": "thisisfromthemodel@example.com", 
"password": { "pwd": "thisispassword", "confirm_pwd": "thisispassword" }, 
"gender": "Male" 
} //user.value

{ "email": "thisisfromthemodel@example.com", 
"password": { "pwd": "thisispassword", "confirm_pwd": "thisispassword" }, 
"gender": "Male" 
} //signupForm.value

Oleh karena itu, saya akan merekomendasikan menggunakan metode one-way binding. Tetapi itu sesuatu yang bisa kamu putuskan.

Validasi dan Menampilkan Pesan Error

Berikut adalah persyaratan kita untuk validasinya.

Semua kontrol form diwajibkan.
Nonaktifkan tombol submit sampai semua field inputan terisi.
Field email harus berisi id email secara ketat.
Field password harus memiliki panjang minimum 8.
Baik password dan konfirmasi harus sesuai.

Form with Validation using Template-driven forms — Form kita dengan validasi di tempat

Yang pertama itu mudah. Kamu harus menambahkan atribut validasi required ke setiap elemen form seperti ini:

app/signup-form/signup-form.component.html

<input type="text" 
    [ngModel] = "user.email" name="email"
    #email = "ngModel"
	placeholder="Email"
	required>

Terlepas dari atribut required, saya juga telah mengekspor variabel referensi template #email baru. Hal ini agar kamu bisa mengakses kotak inputan kontrol Angular dari dalam template itu sendiri. Kita akan menggunakannya untuk menampilkan error dan peringatan. Sekarang gunakan tombol properti yang dinonaktifkan untuk menonaktifkan tombol:

app/signup-form/signup-form.component.html

<button 
   type="submit" 
   class="btn btn-success" 
   [disabled]="!signupForm.form.valid"> 
     Submit
</button>

Untuk menambahkan pembatas pada email, gunakan atribut pattern yang sesuai dengan field inputan. Pattern digunakan untuk menentukan reguler expressions seperti di bawah ini:

1	pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"

Untuk field password, yang harus kamu lakukan adalah menambahkan atribut minlength=" ":

app/signup-form/signup-form.component.html

 <input type="password"
           	ngModel
            id="inputPassword"
            name="pwd"
            #pwd = "ngModel"
            placeholder="Password"
            minlength="8" 
            required>

Untuk menampilkan error, saya akan menggunakan directive kondisional ngIf pada elemen div. Mari kita mulai dengan field kontrol inputan untuk email:

app/signup-form/signup-form.component.html

<div class="form-group">
    	      <label for="inputEmail">Email</label>
			  <input type="text" 
			    [ngModel] = "user.email" name="email"
		        #email = "ngModel" id="inputEmail" 
		        placeholder="Email"
		        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
		        required>
		   	</div>

<!-- This is the error section -->

<div *ngIf="email.invalid && (email.dirty || email.touched)"
 	class="alert alert-danger">
 	<div *ngIf = "email.errors?.required">
 		Email field can't be blank
 	</div>
 	<div *ngIf = "email.errors?.pattern && email.touched">
 		The email id doesn't seem right
 	</div>
 </div>

Ada banyak hal yang terjadi di sini. Mari kita mulai dengan baris pertama dari bagian kesalahan.

1	<div *ngIf="email.invalid && (email.dirty \|\| email.touched)"
2	class="alert alert-danger">

Ingat bahwa variabel #email yang kita ekspor tadi? Ini berisi beberapa informasi tentang state kontrol inputan masukan dari field email. Ini termasuk: email.valid, email.invalid, email.dirty, email.pristine, email.touched, email.untouched, dan email.errors. Gambar di bawah menggambarkan masing-masing sifat tersebut secara rinci.

Different class properties for displaying errors

Jadi elemen div dengan *ngIf akan diberikan hanya jika email tidak valid. Namun, pengguna akan disambut dengan error tentang field inputan yang kosong bahkan sebelum mereka sempat mengubah form.

Untuk menghindari skenario ini, kita menambahkan kondisi kedua. Kesalahan akan ditampilkan hanya setelah kontrol telah dikunjungi atau nilai kontrol telah diubah.

Elemen-elemen div bersarang digunakan untuk mencakup semua kasus error validasi. Kita menggunakan email.errors untuk memeriksa semua kemungkinan error validasi dan kemudian menampilkannya kembali ke pengguna dalam bentuk pesan khusus. Sekarang, ikuti prosedur yang sama untuk elemen form lainnya. Berikut adalah cara saya membuat kode validasi untuk password.

app/signup-form/signup-form.component.html

    <div ngModelGroup="password" #userPassword="ngModelGroup" required >
	   	<div class="form-group">
	      <label for="inputPassword">Password</label>
	      <input type="password"
	        ngModel name="pwd"
            id="inputPassword" placeholder="Password"
            minlength ="8" required>
	    </div>

	    <div class="form-group">
	      <label for="confirmPassword" >Confirm Password</label>
	      <input type="password" 
	        ngModel name="confirmPwd"
            id="confirmPassword" placeholder="Confirm Password">
	    </div>
		
		
	    <div *ngIf="(userPassword.invalid|| userPassword.value?.pwd != userPassword.value?.confirmPwd) && (userPassword.touched)"
	 	class="alert alert-danger">
	 	
 		<div *ngIf = "userPassword.invalid; else nomatch">
 			Password needs to be more than 8 characters
 		</div>
	 		<ng-template #nomatch >
	 			Passwords don't match
	 		</ng-template>
	    </div>
    </div>

Ini mulai terlihat agak berantakan. Angular memiliki sekumpulan atribut validator yang terbatas: required, minlength, maxlength, dan pattern. Untuk menutupi skenario lain seperti perbandingan password, Kamu harus bergantung pada kondisional ngIf bersarang seperti yang saya lakukan di atas. Atau idealnya, buat sebuah fungsi validator khusus, yang akan saya bahas di bagian ketiga dari seri ini.

Dalam kode di atas, saya telah menggunakan sintaks ngIf else yang diperkenalkan di versi Angular terbaru. Begini cara kerjanya:

<div *ngIf="isValid;else notvalid">
    Valid content...
</div>

<ng-template #notValid>Not valid content...</ng-template>

Mengirimkan Form Menggunakan ngSubmit

Kita sudah hampir menyelesaikan form. Sekarang kita harus bisa mengirimkan form, dan mengatur data form yang harus diserahkan ke metode komponen, katakanlah onFormSubmit().

app/signup-form/signup-form.component.ts

1	<form novalidate
2	(ngSubmit)="onFormSubmit(signupForm)"
3	#signupForm="ngForm">
4	...

Sekarang, untuk komponennya:

app/signup-form/signup-form.component.ts

...
  public onFormSubmit({ value, valid}: { value: User, valid: boolean }) {
        this.user = value;
    	console.log( this.user);
    	console.log("valid: " + valid);
  	}
...

Demo Akhir

Berikut adalah versi terakhir dari aplikasi. Saya telah menambahkan beberapa class bootstrap untuk membuat form menjadi menarik.

Rangkuman

Kita semua sudah selesai disini. Pada tutorial ini, kita telah membahas semua hal yang perlu kamu ketahui tentang membuat form di Angular dengan menggunakan pendekatan template-driven.Form template-driven populer untuk kesederhanaan dan kemudahan penggunaannya.

Namun, jika kamu perlu membuat sebuah form dengan banyak elemen form, pendekatan ini akan menjadi berantakan. Jadi, pada tutorial selanjutnya, kita akan membahas cara model-driven untuk membuat form yang sama.

Bagikan pemikiranmu pada komentar di bawah ini.