lifelong learner — urip iku urup, currently working on accenture.

Ionic : form input

0
Degananda.com -

Suatu aplikasi tanpa form input seperti sayur tanpa garam. Tidak enak!. Form input ini terdiri seperti input, select , options dan lain sebagainnya. Jika anda ingin mentahui penjelasan dan implementasi komponen form diatas silahkan simak ulasan ini.

Selayang pandang

Form sangat berguna untuk melakukan operasi Create dan Update. Meski tidak semua operasi create dan update membutuhkan form namun kebanyakan memang membutuhkan form karena pada proses create dan update tentunnya user akan memasukan input yang biasannya dapat berupa text ataupun file yang kemudian akan diproses oleh web services dan menuju ke database.

Selain itu, kami dapat mengatakan bahwa form adalah salah satu komponen yang paling penting dari suatu aplikasi karena fungsi-fungsi utama yang berkaitkan dengan user membutuhkan komponen ini. Kita lihat aplikasi-aplikasi besar seperti facebook , instagram ataupun google plus terdapat banyak sekali form yang dapat berinteraksi dengan penggunannya.

Ionic adalah framework hybrid yang menggunakan angular , sehingga proses form handling dapat dilakukan selayaknya seperti pada angular. Jika anda telah familiar dengan angular maka melakukan handling form di ionic akan lebih mudah meski tentu terdapat beberapa berbedaan terutama pada bagian view. Karena ionic memiliki directivenya sendiri.

Ulasan ini akan membahas mulai dari pembuatan komponen hingga proses form handling seperti :

  1. Membuat komponen form (implementasi pada kode).
  2. Mengambil nilai input yang dimasukan oleh user melalui form
  3. Melakukan validasi terhadap input , misalnya input tersebut hanya menerima angka, format email valid dan lain sebagainnya.

tiga hal diatas merupakan dasar dari penggunaan komponen form pada ionic. Tentunnya terdapat beberapa topik yg advanced megenai form yang belum dibahas pada ulasan ini seperti optimasi form yang menghandle banyak “input”. Kami akan membahas secara terpisah mengenai bagaimana menghandle suatu form dengan jumlah input yang banyak. Jadi jangan lupa bookmark dan mampir ke blog ini hhe.

Input component

1. input

input adalah hal yang sangat penting dalam membangun suatu aplikasi. Kegunaan dari  input adalah untuk mendapatkan data dari user. Dengan menggunakan input user dapat menuliskan sesuatu (melalui keyboard / keypad) terkait dengan form. Misalnya pada form registrasi input digunakan untuk menuliskan nama , email, dan alamat dari user (contoh).

secara basic input dalam ionic ditulis dengan <ion-input> yang memilikia attribute utama berupa type. Input type layaknya seperti html pada umumnya yaitu text, password dan lain sebagainnya. Selain itu, untuk menambahkan keterangan pada input kita dapat melabelinya dengan menggunakan <ion-label>.  Sebaiknya kita menuliskan ion-input ini dalam ion-item yang secara otomatis pasti membutuhkan ion-list. Berikut adalah implementasi <ion-input>

<ion-list>
  <ion-item>
    <ion-label>Judul note</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
</ion-list>

kode diatas akan menghasilkan tampilan sebagai berikut ini

secara default label akan berada di sebelah kiri dari input tersebut. Namun kita juga dapat membuatnya secara otomatis menuju keatas komponen (seperti pada material design) dengan menggunakan directive floating pada <ion-label> contohnya adalah seperti ini

<ion-list>
  <ion-item>
    <ion-label floating>Judul note</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Isi note</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
</ion-list>

kode diatas akan menghasilkan tampilan sebagai berikut ini

2. select

Select adalah komponen yang berfungsi untuk menampilkan pilihan secara dropdown. Biasannya digunakan untuk data-data yang bersifat kategori. Seperti nama kota, nama provinsi, nama negara, jenis subscription(monthly, daily, yearly) dan lain sebagainnya. Komponen select dituliskan dalam bentuk <ion-select>. Berikut ini adalah contoh implementasi <ion-select> dengan menggunakan ngModel.

Contohnya kita memiliki data array dengan isi berupa object buah serta satu variabel untuk menyimpan selected value dari “select” dalam bentuk string.

buahArrayObject : Array<object> = [{
    text : " buah apel",
    value : "apel"
  }, {
    text : " buah mangga",
    value : "mangga"
  }, {
    text : " buah pisang",
    value : "pisang"
}];
selectedBuah : string = "apel";

namun jangan lupa untuk mengimport modul FormModule dari package @angular/form yang dimasukan pada metadata imports pada @ngModule karena kita menggunakan ngModel pada komponen select. Jika menggunakna form builder maka jangan lupa menggunakan ReactiveFormModule , namun jika anda belum familiar dengan angular form silahkan mempelajarinnya terlebih dahulu (pada blog ini ada ulasan mengenai tersebut dibagian angular starter pack).

Chapter 4 – form, service, class, singleton dan model (part A/teori)

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

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    FormsModule
  ],

})
export class AppModule {}

untuk mengimplementasikan select diatas maka kode html / viewnya adalah sebagai berikut ini.

<ion-list>
  <ion-item>
    <ion-label floating>Pilih buah</ion-label>
    <ion-select [(ngModel)]="selectedBuah">
      <ion-option *ngFor="let buahItem of buahArrayObject" [value]="buahItem.value">{{buahItem.text}}</ion-option>>
    </ion-select>
  </ion-item>
</ion-list>

kode diatas akan menghasilkan tampilan seperti dibawah ini

3. radio

radio button adalah komponen yang digunakan untuk menampilkan pilihan yang menghasilkan value (boolean) atau pilhannya hanya berjumlah dua(biasannya) namun bisa lebih tergantung kondisi. radio pada ionic dilambangkan dengan <ion-radio>. komponen radio ini memiliki attribute “value” yang berisis value dari radio tersebut. Selain itu juga terdapat attribute checked yang bernilai true ataupun false Hanya boleh terdapat satu radio yang dicheck, jika ingin multiple check gunakanlah checkbox.

berikut ini adalah contoh implementasi radio button untuk memilih gender. Jangan lupa menambahkan directive radio-group untuk melakukan grouping terhadap radio button tersebut.

<ion-list radio-group>
  <ion-item>
    <ion-label>Pria</ion-label>
    <ion-radio value="pria" checked>pria</ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Wanita</ion-label>
    <ion-radio value="false"></ion-radio>
  </ion-item>
</ion-list>

kode diatas akan menghasilkan tampilan seperti dibawah ini


Form handling pada input component

1. Form Builder

Untuk mendemonstrasikan proses form handling kita akan membangun form untuk registrasi yang nantinnya akan mencakup tiga komponen form diatas (input, select dan radio). Form tersebut akan memiliki item / form-control sebagai berikut ini :

  1. nama (input type text)
  2. jenis kelamin (radio button) dengan pilihan pria atau wanita
  3. pekerjaan (select) dengan pilihan mahasiswa, karyawan, swasta

untuk membangun form tersebut kita akan menggunakan formbuilder. Alasannya sederhana lebih simpel dan cepat (in my opinion, peace).

1.Import reactiveFormModule

Langkah awal adalah mengimport modul reactiveFormModule dari package @angular/form dan jangan lupa menaruhnya pada metadata import pada @ngModule di app.module.ts (layaknya pada angular).

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    FormsModule, 
    ReactiveFormsModule
  ]
})
export class AppModule {}

2.Buat form builder

kita akan mengimplementasikan validator untuk melakukan validasi sederhana yakni field tidak boleh belum di isi atau null.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-list-komponen',
  templateUrl: 'list-komponen.html',
})
export class ListKomponenPage {

  pekerjaanArrayObject : Array<object> = [{
    text : 'siswa',
    value : 'siswa'
  }, {
    text : 'karyawan',
    value : 'karyawan'
  }, {
    text : 'swasta',
    value : 'swasta'
  }];
  formRegistrasi : FormGroup;

  constructor(public navCtrl: NavController, public navParams: NavParams, private fb : FormBuilder) {
    this.formRegistrasi =  this.fb.group({
      nama : this.fb.control('', Validators.required),
      jenis_kelamin : this.fb.control('', Validators.required),
      pekerjaan : this.fb.control('siswa', Validators.required)
    })
  }

  onSubmit(value){
    console.log(value);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListKomponenPage');
  }

}

onSubmit() adalah fungsi yang dieksekusi pada saat user mengklik tombol submit. Validators.required digunakan untuk memvalidasi form-control / form-item agar tidak bernilai null  atau belum di isi/pilih oleh user.

3.Buat view/html

Setelah itu kita buat komponen-komponen terkait kasus diatas.

<form [formGroup]="formRegistrasi" (ngSubmit)="onSubmit(formRegistrasi.value)">
  <ion-list>
    <ion-item>
      <ion-label floating>nama</ion-label>
      <ion-input type="text" formControlName="nama"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Pilih jenis kelamin</ion-label>
    </ion-item>
  
    <ion-list radio-group formControlName="jenis_kelamin">
      <ion-item>
        <ion-label>Pria</ion-label>
        <ion-radio value="pria" checked>pria</ion-radio>
      </ion-item>
        <ion-item>
          <ion-label>Wanita</ion-label>
          <ion-radio value="false"></ion-radio>
        </ion-item>
    </ion-list>

    <ion-item>
      <ion-label>Pekerjaan</ion-label>
      <ion-select formControlName="pekerjaan">
        <ion-option *ngFor="let pekerjaan of pekerjaanArrayObject" [value]="pekerjaan.value">
          {{pekerjaan.text}}
        </ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <button ion-button type="submit" color="primary" [disabled]="!formRegistrasi.valid">submit</button>
    </ion-item>

  </ion-list>
</form>

hasil dari kode diatas akan menampilkan

setelah seluruh form kita isi barulah button tersebut dapat di klik (tidak disabled). NB : button kecil karena kami letakan dalam <ion-item>.

dan jika kita submit pada browser maka akan menghasilkan log sebagai berikut