Angular Forms – 3

by

Validasi form adalah hal yang penting dilakukan, baik pada sisi klien maupun pada sisi server. Kita perlu kembali melakukan validasi input pada sisi server karena, sisi klien bisa saja di hack.

Validasi yang kita lakukan disini masih dalam pendekatan template driven dan pada sisi klien. Misalnya jika input invalid, kita akan tampilkan message.

Menambahkan Validator Pada Form

FIle project masih melanjutkan dari modul sebelumnya, buka file app.component.html, kita akan tambahkan beberapa attribute pada element input:

  • required, adalah html attribute yang digunakan oleh Angular untuk mevalidasi input tidak boleh kosong.
  • email, adalah Angular attribute, digunakan untuk mevalidasi valid email address.
<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 (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username" required>
          </div>
          <button class="btn btn-default" type="button">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" required email>
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" ngModel name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

Jalankan aplikasi, kemudian untuk username dibiarkan kosong, sementara untuk email diisi dengan alamat valid.

Jika tombol submit ditekan (sampai pada modul ini kita belum menangani submit, hanya ditampilkan ke console).

SIlakan buka developer tools, dan perhatikan, Angular akan menambahkan class pada element input, seperti ng-invalid, ng-valid. (Lihat panah merah dan hijau pada gambar dibawah).

Selain itu Angular juga menambahkan class yang menunjukan apakah element sudah diclick (ng-touch), atau sudah diinput (ng-dirty).

Dengan demikian, ini akan memudahkan kita dalam melakukan validasi, karena Angular sudah menambahkan indikator bagi kita.

Menerapkan Validasi dan Styling

Setelah kita mengetahui Angular sudah menambahkan state dari form, kita dapat ambil manfaat dengan melakukan validasi.

Untuk button submit pada app.component.html, kita dapat lakukan enabled/disable berdasarkan form valid atau tidak.

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

Melakukan styling pada input type, misalnya mengubah border menjadi merah.

Buka file app.component.css, tambahkan css rule untuk input.

Perhatikan, kita akan mengubah input menjadi border merah, jika input invalid dan sudah dikunjungi.

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

Anda juga bisa menambahkan message jika input error, misalnya meminta user untuk menginput valid email.

Buka file app.component.html, pada input email, tambahkan local reference #vemail, yang akan digunakan pada span untuk menampilkan message jika vemail tidak valid dan sudah dikunjungi.

<input type="email" id="email" class="form-control" ngModel name="email" required email #vemail="ngModel">
<span *ngIf="!vemail.valid && vemail.touched">Please input valid email...</span>

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 (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username" required>
          </div>
          <button class="btn btn-default" type="button">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" required email #vemail="ngModel">
            <span *ngIf="!vemail.valid && vemail.touched">Please input valid email...</span>
          </div>          
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" ngModel name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
</div>

Isi lengkap app.component.css

.container {
  margin-top: 30px;
}

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

Berikut tampilan ketika user tidak melakukan input data yang valid.

Untuk dokumentasi validator kunjungi https://angular.io/api?type=directive lalu lihat bagian forms, validator adalah directive dengan kata validator pada bagian akhir.

Sharing is caring:

Leave a Comment