Pengenalan Form di Angular 4: Reactive Forms

Ini adalah bagian kedua dari seri Pengenalan Form di Angular 4. Pada bagian pertama, kita membuat form dengan menggunakan pendekatan template-driven. Kita menggunakan directive seperti ngModel, ngModelGroup dan ngForm untuk mengungguli elemen form. Dalam tutorial ini, kita akan mengambil pendekatan yang berbeda terhadap untuk membuat form—cara reaktif.

Reactive Forms

Rective forms mengambil pendekatan yang berbeda dibandingkan dengan bentuk template-driven. Di sini, kita membuat dan menginisialisasi objek kontrol form di class komponen kita. Mereka adalah objek perantara yang memegang state di form. Kita kemudian akan mengikat mereka ke elemen kontrol form dalam template.

Objek kontrol bentuk mendengarkan perubahan nilai kontrol masukan, dan segera tercermin dalam keadaan objek. Karena komponen memiliki akses langsung ke struktur model data, semua perubahan dapat disinkronkan antara model data, objek kontrol form, dan nilai kontrol inputan.

Praktis berbicara, jika kita sedang membangun form untuk memperbarui profil pengguna, model data adalah objek pengguna yang diambil dari server. Dengan konvensi, ini sering disimpan di dalam properti pengguna komponen (this.user). Objek kontrol form atau model form akan terikat pada elemen kontrol form template yang sebenarnya.

Kedua model ini harus memiliki struktur yang serupa, meski keduanya tidak identik. Namun, nilai input tidak boleh mengalir ke model data secara langsung. Gambar tersebut menjelaskan bagaimana input pengguna dari template membuat jalan ke model form.

Mari kita mulai.

Prasyarat

Anda tidak perlu mengikuti bagian pertama dari seri ini, untuk bagian kedua agar masuk akal. Namun, jika kamu baru mengenal form di Angular, saya akan sangat merekomendasikannya melalui strategi template-driven. Kode untuk proyek ini tersedia di repositori GitHub saya. Pastikan kamu berada di branch yang benar dan kemudian unduh zip atau, sebagai alternatif, kloning repo untuk melihat form beraksi.

Jika kamu lebih memilih untuk memulai dari awal, pastikan kamu telah menginstal Angular CLI. Gunakan perintah ng untuk membuat proyek baru.

1

$ ng new SignupFormProject

Selanjutnya, buat komponen baru untuk SignupForm atau buat secara manual.

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.

1

.

2

├── app

3

│   ├── app.component.css

4

│   ├── app.component.html

5

│   ├── app.component.ts

6

│   ├── app.module.ts

7

│   ├── signup-form

8

│   │   ├── signup-form.component.css

9

│   │   ├── signup-form.component.html

10

│   │   └── signup-form.component.ts

11

│   └── User.ts

12

├── index.html

13

├── main.ts

14

├── polyfills.ts

15

├── styles.css

16

├── tsconfig.app.json

17

└── 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 buat. Jadi, inilah bentuk struktur yang ada dalam pikiran saya. Form pendaftaran akan memiliki beberapa field input, elemen select, dan elemen checkbox.

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

Template HTML

1

 <div class="row custom-row">

2

  <div class= "col-sm-5 custom-container jumbotron">

3

4

    <form class="form-horizontal">

5

        <fieldset>

6

        <legend>SignUp</legend>

7

8

            <!--- Email Block --->

9

            <div class="form-group">

10

    	      <label for="inputEmail">Email</label>

11

    		  <input type="text"

12

                id="inputEmail"

13

    	        placeholder="Email">

14

    	   	</div>

15

            <!--- Password Block --->

16

    	   	<div class="form-group">

17

    	      <label for="inputPassword">Password</label>

18

    	      <input type="password" 

19

                id="inputPassword"

20

                placeholder="Password">

21

    	    </div>

22

23

    	    <div class="form-group">

24

    	      <label for="confirmPassword" >Confirm Password</label>

25

    	      <input type="password" 

26

                id="confirmPassword"

27

                placeholder="Password">

28

    	    </div>

29

30

            <!--- Select gender Block --->

31

    	    <div class="form-group">

32

    	      <label for="select">Gender</label>

33

    	        <select id="select">

34

    	          <option>Male</option>

35

    	          <option>Female</option>

36

    	          <option>Other</option>

37

    	        </select>

38

    	    </div>

39

40

            <!--- Terms and conditions Block --->

41

             <div class="form-group checkbox">

42

              <label>

43

                <input type="checkbox"> Confirm that you've read the Terms and 

44

                Conditions

45

              </label>

46

            </div>

47

48

           <!--- Buttons Block --->

49

    	    <div class="form-group">

50

    	        <button type="reset" class="btn btn-default">Cancel</button>

51

    	        <button type="submit" class="btn btn-primary">Submit</button>

52

    	    </div>

53

    	</fieldset>

54

    </form>

55

  </div>

56

</div>

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

Dasar Pengaturan Form

Untuk membuat Rective form, kamu perlu mengimpor ReactiveFormsModule dari @angular/forms dan tambahkan ini ke array imports di app.module.ts.

app/app.module.ts

1

// Import ReactiveFormsModule

2

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

3

4

@NgModule({

5

  .

6

  .

7

  //Add the module to the imports Array

8

  imports: [

9

    BrowserModule,

10

    ReactiveFormsModule

11

 .

12

 .

13

})

14

export class AppModule { }

Selanjutnya, buatlah model User untuk form pendaftaran. Kita bisa menggunakan class atau antarmuka untuk membuat model. Untuk tutorial ini, saya akan mengekspor class dengan properti berikut.

app/User.ts

1

export class User {

2

3

    id: number;

4

    email: string;

5

    //Both the passwords are in a single object

6

    password: { 

7

	  pwd: string;

8

	  confirmPwd: string;

9

	};

10

11

	gender: string;

12

    terms: boolean;

13

14

	constructor(values: Object = {}) {

15

	  //Constructor initialization

16

      Object.assign(this, values);

17

  }

18

19

}

Sekarang, buat sebuah instance dari model User di komponen SignupForm.

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

1

import { Component, OnInit } from '@angular/core';

2

// Import the User model

3

import { User } from './../User';

4

5

@Component({

6

  selector: 'app-signup-form',

7

  templateUrl: './signup-form.component.html',

8

  styleUrls: ['./signup-form.component.css']

9

})

10

export class SignupFormComponent implements OnInit {

11

12

  //Gender list for the select control element

13

  private genderList: string[];

14

  //Property for the user

15

  private user:User;

16

17

  ngOnInit() {

18

19

    this.genderList =  ['Male', 'Female', 'Others'];

20

21

22

}

Untuk file signup-form.component.html, saya akan menggunakan template HTML yang sama dibahas di atas, namun dengan sedikit perubahan. Formulir pendaftaran memiliki field 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

1

<div class="row custom-row">

2

  <div class= "col-sm-5 custom-container jumbotron">

3

4

    <form class="form-horizontal">

5

        <fieldset>

6

          <legend>SignUp</legend>

7

.

8

.

9

            <!--- Gender Block -->

10

            <div class="form-group">

11

              <label for="select">Gender</label>

12

                   <select id="select">

13

14

        	         <option *ngFor = "let g of genderList" 

15

        	           [value] = "g"> {{g}} 

16

        	         </option>

17

        	       </select>

18

        	   </div>

19

.

20

.

21

    </fieldset>

22

    </form>

23

  </div>

24

</div>

Catatan: Kamu mungkin mendapatkan pesan error yang mengatakan No provider for ControlContainer. Error muncul saat komponen memiliki tag tanpa directive formGroup. Error akan hilang begitu kita menambahkan directive formGroup nanti di tutorial.

Kita memiliki komponen, model, dan template form yang ada. Sekarang apa? Sudah waktunya untuk membuat tangan kita kotor dan berkenalan dengan API yang kamu butuhkan untuk membuat reactive forms. Ini termasuk FormControl dan FormGroup.

Melacak State Menggunakan FormControl

Sementara membangun form dengan strategi reactice forms, kamu tidak akan menemukan perintah ngModel dan ngForm. Sebagai gantinya, kita menggunakan API FormControl dan FormGroup yang mendasarinya.

FormControl adalah perintah yang digunakan untuk membuat instance FormControl yang dapat kamu gunakan untuk melacak state elemen form dan status validasinya. Beginilah cara kerja FormControl:

1

/* Import FormControl first */

2

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

3

4

/* Example of creating a new FormControl instance */

5

export class SignupFormComponent {

6

  email = new FormControl();

7

}

email sekarang adalah instance FormControl, dan kamu dapat mengikatnya ke elemen kontrol input di templatemu sebagai berikut:

1

<h2>Signup</h2>

2

3

<label class="control-label">Email:

4

  <input class="form-control" [formControl]="email">

5

</label>

Elemen form template sekarang terikat pada contoh FormControl di komponen. Apa artinya perubahan pada nilai kontrol inputan tercermin di ujung yang lain.

Konstruktor FormControl menerima tiga argumen—nilai awal, array validator sinkronisasi, dan serangkaian validator async—dan seperti yang kamu duga, semuanya opsional. Kita akan membahas dua argumen pertama di sini.

1

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

2

.

3

.

4

.

5

/* FormControl with initial value and a validator */

6

7

  email = new FormControl('bob@example.com', Validators.required);

Angular memiliki seperangkat validator bawaan yang terbatas. Metode validator yang populer meliputi Validators.required, Validators.minLength, Validators.maxlength, dan Validators.pattern. Namun, untuk menggunakannya, Anda harus mengimpor API Validator terlebih dahulu.

Untuk form pendaftaran, kita memiliki beberapa field kontrol input (untuk email dan password), field select, dan field checkbox. Daripada membuat objek FormControl individual, bukankah lebih masuk akal untuk mengelompokkan semua FormControls ini di bawah satu entitas? Hal ini bermanfaat karena kita sekarang bisa melacak nilai dan kevalidan semua objek sub-FormControl di satu tempat. Itulah FormGroup. Jadi kita akan mendaftarkan FormGroup induk dengan beberapa anak FormControls.

Grup Beberapa FormControls Dengan FormGroup

Untuk menambahkan FormGroup, impor dulu. Selanjutnya, deklarasikan signupForm sebagai properti class dan inisialisasi sebagai berikut:

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

1

//Import the API for building a form

2

import { FormControl, FormGroup, Validators } from '@angular/forms';

3

4

5

export class SignupFormComponent implements OnInit {

6

7

    genderList: String[];

8

    signupForm: FormGroup;

9

    .

10

    .

11

12

   ngOnInit() {

13

14

    this.genderList =  ['Male', 'Female', 'Others'];

15

16

    this.signupForm = new FormGroup ({

17

    	email: new FormControl('',Validators.required),

18

		pwd: new FormControl(),

19

		confirmPwd: new FormControl(),

20

		gender: new FormControl(),

21

		terms: new FormControl()

22

	})

23

24

   }

25

}

Bind FormGroup model ke DOM sebagai berikut:

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

1

    <form class="form-horizontal"  [formGroup]="signupForm" >

2

        <fieldset>

3

    	  <legend>SignUp</legend>

4

5

            <!--- Email Block -->

6

            <div class="form-group">

7

    	      <label for="inputEmail">Email</label>

8

    		  <input type="text" formControlName = "email"

9

                id="inputEmail"

10

    	        placeholder="Email">

11

12

            .

13

            .

14

15

        </fieldset>

16

    </form>

[formGroup] = "signupForm" memberitahu Angular bahwa kamu ingin mengaitkan formulir ini dengan FormGroup yang dideklarasikan di class komponen. Ketika Angular melihat formControlName = "email", ia akan memeriksa sebuah instance dari FormControl dengan nilai kunci email di dalam FormGroup induk.

Demikian pula, perbarui elemen bentuk lainnya dengan menambahkan atribut formControlName = "value" seperti yang baru saja kita lakukan di sini.

Untuk melihat apakah semuanya bekerja seperti yang diharapkan, tambahkan berikut ini setelah tag form:

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

1

<!--- Log the FormGroup values to see if the binding is working -->

2

    <p>Form value {{ signupForm.value | json }} </p>

3

     <p> Form status {{ signupForm.status | json}} </p>

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

Ada dua hal yang perlu dicatat disini:

1. JSON tidak sama persis dengan struktur model user yang kita buat tadi.
2. SignupForm.status menunjukkan bahwa status form adalah INVALID. Ini jelas menunjukkan bahwa Validators.required pada bidang field kontrol email yang bekerja seperti yang diharapkan.

Struktur model form dan model data harus sesuai.

1

// Form model

2

 { 

3

    "email": "", 

4

    "pwd": "", 

5

    "confirmPwd": "", 

6

    "gender": "", 

7

    "terms": false 

8

}

9

10

//User model

11

{

12

    "email": "",

13

    "password": { 

14

	  "pwd": "",

15

	  "confirmPwd": "",

16

	},

17

	"gender": "",

18

    "terms": false

19

}

Untuk mendapatkan struktur hierarkis model data, kita harus menggunakan FormGroup bersarang. Selain itu, selalu ada ide bagus untuk memiliki elemen form terkait di bawah satu FormGroup tunggal.

FormGroup Bersarang

Buat FormGroup baru untuk passwordnya.

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

1

    this.signupForm = new FormGroup ({

2

    	email: new FormControl('',Validators.required),

3

		password: new FormGroup({

4

			pwd: new FormControl(),

5

			confirmPwd: new FormControl()

6

		}),

7

		gender: new FormControl(),

8

		terms: new FormControl()

9

	})

Sekarang, untuk mengikat model form baru dengan DOM, buat perubahan berikut:

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

1

<!--- Password Block -->

2

    <div formGroupName = "password">

3

	   	<div class="form-group">

4

	      <label for="inputPassword">Password</label>

5

	      <input type="password" formControlName = "pwd"

6

            id="inputPassword"

7

            placeholder="Password">

8

	    </div>

9

10

	    <div class="form-group">

11

	      <label for="confirmPassword" >Confirm Password</label>

12

	      <input type="password" formControlName = "confirmPwd"

13

            id="confirmPassword"

14

            placeholder="Password">

15

	    </div>

16

    </div>

formGroupName = "password" melakukan binding untuk FormGroup bersarang. Sekarang, struktur model form sesuai dengan kebutuhan kita.

1

Form value: { 

2

    "email": "", "

3

    password": { "pwd": null, "confirmPwd": null }, 

4

    "gender": null, 

5

    "terms": null 

6

    }

7

8

Form status "INVALID"

Selanjutnya, kita perlu memvalidasi kontrol form.

Memvalidasi Form

Kita memiliki validasi sederhana untuk kontrol inputan email. Namun, itu tidak cukup. Berikut adalah daftar seluruh kebutuhan kita untuk validasinya.

• Semua elemen kontrol form diwajibkan.
• Nonaktifkan tombol submit sampai status form-nya VALID.
• Field email harus berisi id email secara ketat.
• Feld password harus memiliki panjang minimum 8.

Yang pertama itu mudah. Tambahkan Validator.required ke semua FormControls dalam model form.

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

1

2

    this.signupForm = new FormGroup ({

3

		email: new FormControl('',Validators.required),

4

		password: new FormGroup({

5

			pwd: new FormControl('', Validators.required),

6

			confirmPwd: new FormControl('', Validators.required)

7

		}),

8

		gender: new FormControl('', Validators.required),

9

        //requiredTrue so that the terms field isvalid only if checked

10

		terms: new FormControl('', Validators.requiredTrue)

11

	})

Selanjutnya, nonaktifkan tombol selagi form INVALID.

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

1

<!--- Buttons Block -->

2

    <div class="form-group">

3

        <button type="reset" class="btn btn-default">Cancel</button>

4

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

5

    </div>

Untuk menambahkan pembatas pada email, kamu dapat menggunakan Validator.email bawaan atau membuat Validators.pattern() yang menunjukkan reguler expressions seperti yang ada di bawah ini:

1

email: new FormControl('',

2

    [Validators.required, 

3

    Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])

Gunakan validator minLength untuk kolom password.

1

    password: new FormGroup({

2

    		pwd: new FormControl('', [Validators.required, Validators.minLength(8)]),

3

			confirmPwd: new FormControl('', [Validators.required, Validators.minLength(8)])

4

		}),

Itu untuk validasi. Namun, bentuk logika model tampak berantakan dan berulang-ulang. Mari rapikan itu terlebih dulu.

Refaktori Kode Menggunakan FormBuilder

Angulat memberimu sintaks yang manis untuk membuat instance baru dari FormGroup dan FormControl yang disebut FormBuilder. API FormBuilder tidak melakukan sesuatu yang istimewa selain yang telah kita bahas di sini.

Ini menyederhanakan kode kita dan membuat proses pembuatan form tampak terlihat mudah. Untuk membuat FormBuilder, kamu harus mengimpornya ke signup-form.component.ts dan menyuntikkan FormBuilder ke dalam konstruktor.

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

1

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

2

.

3

.

4

export class SignupFormComponent implements OnInit {

5

    signupForm: FormGroup; // Declare the signupForm 

6

7

    //Inject the formbuilder into the constructor

8

	constructor(private fb:FormBuilder) {}

9

10

    ngOnInit() {

11

12

    ...

13

14

    }

15

16

}

Daripada membuat FormGroup() baru, kita dapat menggunakan this.fb.group untuk membuat form. Kecuali sintaksnya, semuanya tetap sama.

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

1

2

	ngOnInit() {

3

        ...

4

5

		this.signupForm  = this.fb.group({

6

			email: ['',[Validators.required,

7

						Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],

8

			password: this.fb.group({

9

				pwd: ['', [Validators.required, 

10

						   Validators.minLength(8)]],

11

				confirmPwd: ['', [Validators.required,

12

								  Validators.minLength(8)]]

13

			}),

14

			gender: ['', Validators.required],

15

			terms: ['', Validators.requiredTrue]

16

		})

17

}

Menampilkan Error Validasi

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

1

<!-- Email error block -->

2

<div *ngIf="signupForm.controls.email.invalid && signupForm.controls.email.touched"

3

    Email is invalid

4

</div>

Ada beberapa masalah di sini.

1. Darimana asal invalid dan pristine?
2. signupForm.controls.email.invalid terlalu panjang dan mendalam.
3. Error tersebut tidak secara eksplisit mengatakan mengapa hal itu tidak valid.

Untuk menjawab pertanyaan pertama, setiap FormControl memiliki sifat tertentu seperti invalid, valid, pristine, dirty, touched, dan untouched. Kita bisa menggunakan ini untuk mengetahui apakah pesan error atau peringatan harus ditampilkan atau tidak. Gambar di bawah menggambarkan masing-masing sifat tersebut secara rinci.

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. Error akan ditampilkan hanya setelah kontrol telah dikunjungi.

Untuk menyingkirkan rantai panjang pada nama metode (signupForm.controls.email.invalid), saya akan menambahkan beberapa metode getter singkat. Hal ini membuatnya lebih mudah diakses dan singkat.

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

1

export class SignupFormComponent implements OnInit {

2

...

3

4

    get email() { return this.signupForm.get('email'); }

5

6

	get password() { return this.signupForm.get('password'); }

7

8

	get gender() { return this.signupForm.get('gender'); }

9

10

	get terms() { return this.signupForm.get('terms'); }

11

12

}

Untuk membuat error lebih eksplisit, saya telah menambahkan kondisi ngIf bersarang di bawah ini:

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

1

<!-- Email error block -->

2

	<div *ngIf="email.invalid && email.touched"

3

	 	class="col-sm-3 text-danger">

4

5

	 	<div *ngIf = "email.errors?.required">

6

	 		Email field can't be blank

7

	 	</div>

8

9

	 	<div *ngIf = "email.errors?.pattern">

10

	 		The email id doesn't seem right

11

	 	</div>

12

13

	 </div>

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 dan persyaratan kontrol inputan.

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

1

 <!-- Password error block -->

2

       <div *ngIf="(password.invalid && password.touched)"

3

 		class="col-sm-3 text-danger">

4

5

 		Password needs to be more than 8 characters

6

  	</div>

7

8

.

9

.

10

.

11

 <!--- Terms error block -->

12

   	  <div *ngIf="(terms.invalid && terms.touched)"

13

	 	class="col-sm-3 text-danger">

14

15

 		Please accept the Terms and conditions first.

16

   	  </div>

17

   	</div>

Mengirim Form Menggunakan ngSubmit

Kita hampir selesai dengan form-nya. Ini tidak memiliki fungsi submit, akan kita implementasikan sekarang.

1

<form class="form-horizontal"  

2

    [formGroup]="signupForm" 

3

    (ngSubmit)="onFormSubmit()" >

Pada form submit, nilai model form harus mengalir ke dalam properti komponen pengguna.

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

1

public onFormSubmit() {

2

    	if(this.signupForm.valid) {

3

			this.user = this.signupForm.value;

4

			console.log(this.user);

5

            /* Any API call logic via services goes here */

6

		}

7

	}

Demo Akhir

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

Rangkuman

Jika kamu telah mengikuti rangkaian tutorial ini sejak awal, kita memiliki pengalaman langsung dengan dua teknologi pembuatan form populer di Angular. Teknik template-driven dan model-driven adalah dua cara untuk mencapai hal yang sama. Secara pribadi, saya lebih suka menggunakan formu reactive karena alasan berikut:

• Semua logika validasi form akan ditempatkan di satu tempat—di dalam class komponenmu. Ini jauh lebih produktif daripada pendekatan template, dimana directive ngModel tersebar di seluruh template.
  
• Tidak seperti form template-driven, form Model-driven lebih mudah untuk dites. Kamu tidak perlu menggunakan library tes end-to-end untuk menguji form-mu.
• Validasi logika akan masuk ke dalam class komponen dan bukan di template.
• Untuk form dengan sejumlah elemen form yang besar, pendekatan ini memiliki sesuatu yang disebut FormBuilder untuk membuat pembuatan objek FormControl menjadi lebih mudah.

Kita melewatkan satu hal, dan itu adalah penulisan validator untuk ketidakcocokan password. Di bagian akhir dari seri ini, kita akan membahas semua hal yang perlu kamu ketahui tentang membuat fungsi validator khusus di Angular. Nantikan terus sampai saat itu.

Sementara itu, ada banyak framework dan library yang membuatmu tetap sibuk, dengan banyak item di Envato Market untuk dibaca, dipelajari, dan digunakan.