Angular Reactive Forms – 8

Ada kalanya kita perlu melakukan validasi ke server, dimana kita tidak mengetahui kapan return akan dikembalikan. Untuk itu perlu digunakan pendekatan async.

Skenarionya adalah memeriksa validasi email, kita akan gunakan setTimeOut untuk mesimulasikan asynchronous.

Untuk membuat async validator, kita gunakan promise. Sementara untuk implementasi pada form control, gunakan parameter ke tiga. (lihat baris comment pada source code).

Untuk demo, kita gunakan validasi sederhana jika alamat email test@test.com adalah invalid.

Buka file app.component.ts, lalu tambahkan code dibawah.

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  genders = ['male', 'female'];
  myForm! : FormGroup;
  forbiddenUsrNm = ['root', 'admin'];

  ngOnInit(){
    this.myForm = new FormGroup({
      'userData' : new FormGroup({
        'username' : new FormControl(null, [Validators.required, this.isForbidNames.bind(this)]),
        //tambahkan async validator pada parameter ke 3.
        'email' : new FormControl(null, [Validators.required, Validators.email], this.isForbidEmail),  
      }),
      'gender' : new FormControl('male'),
      'hobbies' : new FormArray([])
    });
  }

  onSubmit(){
    console.log(this.myForm);
  }

  get usrnm() { return this.myForm.get('userData.username'); }
  get email() { return this.myForm.get('userData.email'); }
  get hobbies() {return (this.myForm.get('hobbies') as FormArray).controls;}

  onAddHobby(){
    const ctrl = new FormControl(null, Validators.required);
    (<FormArray>this.myForm.get('hobbies')).push(ctrl);
  }

  

  isForbidNames(ctrl : FormControl): {[s: string]: boolean} {
    if (this.forbiddenUsrNm.indexOf(ctrl.value) !==-1){
      return {'nameisforbidden': true}
    }else{
      return null;
    }
  }

  //async validator
  isForbidEmail(ctrl: FormControl) : Promise<any> | Observable<any>{
    const promise = new Promise<any>((resolve, reject)=>{
      setTimeout(()=>{
        if (ctrl.value === 'test@test.com'){
          resolve({'emailIsForbidden':true});
        }else{
          resolve(null);
        }
      }, 1500);
    });
    return promise;
  }

}

Saat melakukan testing, silakan buka developer tools, dan perhatikan element email. Saat kita melakukan perubahan email, Angular akan menggunakan class ng-pending.

Setelah mendapatkan data, Angular akan mengubah menjadi ng-valid atau ng-invalid.