Angular Reactive Forms – 4

Melanjutkan modul sebelumnya, kita akan membahas validasi form.

Pada modul sebelumnya, saat mendefinisikan form control, kita hanya mengisi argument default value.

Disini kita akan tambahkan argument validasi. KIta dapat menggunakan default validator yang disediakan oleh Angular.

Perhatikan, kita dapat menggunakan lebih dari satu validator dengan mengisi argumen dengan array of validators.

Perhatian penggunaan method getter adalah optional, tujuannya untuk mempermudah mengakses form control dari file template.

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

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

  ngOnInit(){
    this.myForm = new FormGroup({
      'username' : new FormControl(null, Validators.required),
      'email' : new FormControl(null, [Validators.required, Validators.email]),
      'gender' : new FormControl('male')
    });
  }

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

  get usrnm() { return this.myForm.get('username'); }
}

Validasi sudah ditambahkan, berikutnya kita akan tambahkan message jika invalid input terjadi.

Buka file app.component.html, tambahkan message dalam element paragraf sesudah input type username.

<p *ngIf="usrnm.invalid  && usrnm.touched">Please input user name</p>

Jika Anda test, paragraf diatas akan ditampilkan jika username tidak diisi.

Latihan

Tambahkan method getter untuk email dan tambahkan paragaph message untuk email.

Solusi

Berikut isi lengkap file app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="username">Username</label>
          <input
            type="text"
            id="username"
            class="form-control"
            formControlName="username">
            <p *ngIf="usrnm.invalid  && usrnm.touched">Please input user name</p>
        </div>
        <div class="form-group">
          <label for="email">email</label>
          <input
            type="text"
            id="email"
            class="form-control"
            formControlName="email">
            <p *ngIf="email.invalid  && email.touched">Please input valid email</p>
        </div>
        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input
              type="radio"
              [value]="gender"
              formControlName="gender">{{ gender }}
          </label>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

file app.component.ts

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

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

  ngOnInit(){
    this.myForm = new FormGroup({
      'username' : new FormControl(null, Validators.required),
      'email' : new FormControl(null, [Validators.required, Validators.email]),
      'gender' : new FormControl('male')
    });
  }

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

  get usrnm() { return this.myForm.get('username'); }
  get email() { return this.myForm.get('email'); }
}

Menggunakan Style

Anda juga tetap dapat menggunakan style seperti yang dilakukan pada pendekatan template driven. Misalnya menampilkan border element menjadi merah jika invalid dan sudah ditouched.

Buka file app.component.css, lalu tambahkan rule berikut

input.ng-invalid.ng-touched{
  border: 1px red solid;
}