Angular Reactive Forms – 9

Pada modul ini kita akan beberapa fungsi sekaligus yaitu obeservable untuk value dan status, setValue dan patchValue serta form reset.

Observable value

Untuk contoh, buka file app.component.ts, lalu pada method ngOnInit tambahkan code

Perhatian, kita juga dapat observe pada level control.

this.myForm.valueChanges.subscribe(
    (value)=>{
      console.log(value);
    }
  );

Jika dijalankan, perhatikan pada console, setiap kita melakukan perubahan pada form, value dari form akan tulis ke console.

Observable Status

Kita juga dapat subscribe perubahan state dari form. Pada contoh code digunakan level form control, yaitu email.

this.email.statusChanges.subscribe(
    (status)=>{
      console.log(status);
    }
  );

Jika jalankan, dan coba isi email, maka setiap perubahan state akan di-log ke console.

Set Value Form

Sama seperti pendekatan template driven, kita dapat gunakan fungsi setValue.

Untuk sederhananya kita gunakan method onInit, lalu tambahkan code berikut.

this.myForm.setValue({
    'userData' : {
      'username' : 'testing',
      'email' : 'test2@test.com'
    },
    'gender': 'female',
    'hobbies': []
  });

Jika dijalankan, form akan diisi dengan value diatas.

Patching Value

Sama seperti template driven, patching digunakan untuk mengubah form control tertentu saja.

this.myForm.patchValue({
    'userData' : {
      'username' : 'testing123'
    }
  });

Reseting Form

Sama seperti template driven, kita dapat melakukan form reseting juga. Sebagai contoh, kita lakukan reset setelah form disubmit.

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

Berikut isi akhir dari file app.component.ts

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([])
    });
    //observable value form level
    // this.myForm.valueChanges.subscribe(
    //   (value)=>{
    //     console.log(value);
    //   }
    // );

    //observable status form control level
    // this.email.statusChanges.subscribe(
    //   (status)=>{
    //     console.log(status);
    //   }
    // );

    //setvalue
    this.myForm.setValue({
      'userData' : {
        'username' : 'testing',
        'email' : 'test2@test.com'
      },
      'gender': 'female',
      'hobbies': []
    });

    //patch value
    this.myForm.patchValue({
      'userData' : {
        'username' : 'testing123'
      }
    });


  }

  onSubmit(){
    console.log(this.myForm);
    //reseting form
    this.myForm.reset();
  }

  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;
    }
  }

  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;
  }

}

Sampai disini kita sudah selesai membahas Angular Form dengan pendekatan reactive.

File final project Reactive Forms dapat di download disini https://drive.google.com/file/d/1gMx-qhw8zf0tuW2lUOzeCvnYp-1DN38T/view?usp=sharing