Angular 7 - Reactive Forms Validation Example

Ini adalah contoh cepat tentang cara men-setup validasi form di Angular 7 menggunakan Reactive Forms. Contohnya adalah formulir pendaftaran sederhana dengan form standar dengan variabel firstname, lastname, email, password dan confirm password. Semua bidang diperlukan, bidang email harus alamat email yang valid dan bidang kata sandi harus memiliki panjang min 6. Ada juga validator kustom yang disebut MustMatch yang digunakan untuk memvalidasi bahwa kata sandi konfirmasi dan kata sandi cocok.

Saya sudah menyiapkan formulir untuk memvalidasi pada submit yang dengan cepat diubah setelah proresnya, ini diimplementasikan dengan field 'submitted' dalam app component yang diberi nilai ke true ketika formulir dikirimkan untuk pertama kalinya.

Styling dari contohcberikut semua dilakukan dengan Bootstrap 4 CSS.

Reactive Forms Validation App Component

App component mendefinisikan kolom formulir dan validator untuk formulir pendaftaran yang kami buat menggunakan Angular FormBuilder untuk membuat instance dari FormGroup yang disimpan di properti registerForm. registerForm kemudian terikat ke form di template di bawah ini menggunakan [formGroup] direktif.

Saya juga menambahkan getter 'f' sebagai properti yang cocok untuk mempermudah mengakses controls form dari template. Jadi misalnya Anda dapat mengakses bidang confirmPassword di template menggunakan f.confirmPassword daripada registerForm.controls.confirmPassword.

 

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

// import custom validator to validate that password and confirm password fields match
import { MustMatch } from './_helpers/must-match.validator';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]],
            confirmPassword: ['', Validators.required]
        }, {
            validator: MustMatch('password', 'confirmPassword')
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value))
    }
}

Reactive Forms Validation App Template

Template app component berisi semua markup html untuk menampilkan contoh formulir pendaftaran di browser Anda. Elemen formulir menggunakan [formGroup] direktif untuk mengikat ke FormGroup registerForm dalam app component di atas.

Form mengikat submit form pada even onSubmit () handler dalam app component menggunakan event binding pada angular (ngSubmit) = "onSubmit ()". Pesan validasi ditampilkan hanya setelah pengguna mencoba mengirimkan formulir untuk pertama kalinya, ini dikontrol dengan properti yang dikirimkan dari komponen aplikasi. 

<!-- main app container -->
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h3>Angular 7 Reactive Form Validation</h3>
                <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
                        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
                        <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                            <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                        <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                            <div *ngIf="f.email.errors.required">Email is required</div>
                            <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                            <div *ngIf="f.password.errors.required">Password is required</div>
                            <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
                        <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
                            <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
                            <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Reactive Forms Custom "Must Match" Validator

Validator MustMatch kebiasaan digunakan dalam contoh ini untuk memvalidasi bahwa kedua bidang kata sandi - kata sandi dan confirmPassword - cocok. Namun, ini dapat digunakan untuk memvalidasi bahwa setiap pasangan bidang cocok (mis. Email dan konfirmasi bidang email).

Kerjanya sedikit berbeda dari validator khusus biasa karena saya mengatur kesalahan pada bidang kedua alih-alih mengembalikannya untuk ditetapkan pada formGroup. Saya melakukannya dengan cara ini karena saya pikir itu membuat template sedikit lebih bersih dan lebih intuitif, kesalahan validasi mustMatch ditampilkan di bawah bidang confirmPassword jadi saya pikir itu masuk akal bahwa kesalahan dilampirkan pada kontrol bentuk confirmPassword. 

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

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            // return if another validator has already found an error on the matchingControl
            return;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
        } else {
            matchingControl.setErrors(null);
        }
    }
}

Reactive Forms Validation App Module

Tidak banyak yang dirubah pada app module selain dari hal-hal standar, hal utama yang perlu Anda ingat untuk menggunakan bentuk reaktif di Angular adalah untuk mengimpor Reactive FormsModule dari '@ angular / forms' dan memasukkannya ke dalam array impor dari dekorator @NgModule.

 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

 

Demikian, silahkan diaplikasikan ya teman-teman jangan lupa amati script dan prosesnya.

Terimakasih, silahkan beri komentar...