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

angular – multiple input form

1
Degananda.com -

Untuk memberikan solusi terhadap suatu proses bisnis tertentu terkadang kita dituntut untuk menggunakan banyak form dalam satu halaman. Misalkan kasusya adalah proses bisnis pengelolaan jadwal futsal. Otomatis kita akan menggunakan banyak input[type=text] dalam satu halaman untuk menampung harga dan ketersediaan lapangan tersebut.

Lalu bagaimanakah cara membuat multiple form input seperti daitas ? jawabannya adalah dengan menggunakan  reactiveFormModule dan formbuilder. Melalui modul ini membuat banyak input form akan menjadi terasa mudah karena kita dapat mendefinisikan formcontrol dengan menggunakan bantuan “angka unik” sehingga kita dapat mengakomodasi banyak input form dalam satu formgroup. Penggunaan formbuilder akan mempersingkat waktu development karena syntax yang harus ditulis pada class lebih sedikit.

Persiapan

Untuk mengikuti tutorial ini ada beberapa hal yang harus disiapkan yaitu :

  1. angular cli (kami menggunakan versi 1.x+)
  2. nodejs
  3. angular versi 4.x +(namun jika menggunakan versi 2.x tidak ada masalah karena tidak ada perubahan pada mekanisme reactiveFormModule).
  4. browser

kita akan membuat form untuk mengelola jadwal pada lapangan futsal. Kira-kira bentuk UInya adalah seperti berikut ini.

nb : tidak menggunaka database a.k.a hanya mendemonstrasikan bagaimana membuat form dengan multiple input yang dapat disubmit dalam satu formgroup.

Implementasi

1.Setup project

pertama buatlah project baru dengan menggunakan angular cli

ng new nama_project

setelah itu masuk ke dalam project tersebut

cd nama_project

jalanakan server development angular

ng serve

2.Menggunakan modul reactiveFormModule

kita akan menggunakan reactiveFormModule oleh karena itu pada app.module.ts(/src/app) kita akan mengimport modul reactiveFormModule dari package @angular/form. Kemudian masukan modul tersebut pada metadata imports di class decorator @ngModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ComMultipleinputComponent } from './com-multipleinput/com-multipleinput.component';

@NgModule({
  declarations: [
    AppComponent,
    ComMultipleinputComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

sampai dengan step ini kita telah siap untuk mengimplementasikan reactiveFormModule tersebut pada form.

3.Membuat komponen

Setelah itu buatlah satu komponen baru dalam kasus ini kami membuat komponen baru bernama com-multipleinput. Anda dapat menamai nama dari komponen tersebut. Komponen ini nantinnya akan digunakan untuk membuat form.

ng g component com-multipleinput

3.1 Form group

setelah komponen dibuat maka kita akan definisikan beberapa variabel pada class com-multipleinput tersebut. Jumlah form input nantinnya akan didefinisikan oleh variabel jumlah_input. Pada template / view akan melakukan looping terhadap variabel jumlah_input tersebut. Formbuilder hanya akan digunakan untuk membuat formgroup. Sementara form control akan dibuat dengan menggunakan fungsi formgroup.addControl(). Melalui mekanisme ini kita dapat membuat multiple input form pada satu formgroup.

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

@Component({
  selector: 'app-com-multipleinput',
  templateUrl: './com-multipleinput.component.html',
  styleUrls: ['./com-multipleinput.component.css']
})
export class ComMultipleinputComponent implements OnInit {

  private jumlah_input : number = 5;
  private formInputArray : Array<Object> = [];
  private myForm : FormGroup;

  constructor(
    private fb : FormBuilder
  ) { }

  ngOnInit() {
    // inisiasi formgroup kosong
    this.myForm = this.fb.group({

    });

    // inisiasi formcontrol
    for(var i = 0;i<this.jumlah_input;i++){
      // set forminput array untuk looping
      this.formInputArray.push({
        label : 'form '+i,
        formControlName : 'myFormInput'+i
      });
      // menggunakan angka unik dibelakang sebagai identifier.
      this.myForm.addControl('myFormInput'+i, this.fb.control('', Validators.required));
    }
  }

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

}

kita akan menggunakan “angka unik” dalam medefinisikan nama dari formcontrol hal ini agar kita dapat membuat banyak form control.  Untuk validasi akan diambil dari modul Validators dari package @angular/form. Kita hanya mengimplementasikan validasi yang sederhana yakni “required” a.k.a tidak oleh ada satupun form control yang kosong.

fungsi addControl memiliki dua parameter yang harus di isi. Pertama adalah nama dari formControl tersebut yang kedua adalah nilai/value dari abstract controlnya. Kita dapat gunakan parameter kedua untuk keperluan validasi.

looping kami lakukan pada array dengan menggunakan ngFor oleh karena itu kita simpan beberapa data yang digunakan untuk membuat form seperti label dan formControlName pada variabel formInputArray.

3.2 View

Setelah itu kita akan membuat view dari komponen diatas. Berikut ini adalah kodenya

seluruh form control dibuat dengan menggunakan ngFor / looping. Karena kita membutuhkan data dari looping tersebut untuk digunakan pada attribute formControlName. Namun, validasi belum di implementasikan diatas karena kurang menambahkana atrribute [disabled]=”!myForm.valid” (silahkan tambahkan ini pada button jika ingin mengaplikasikan validator yang telah kita buat pada class).

4. Pengujian

Done saatnya melakukan pengujian mensubmit form diatas dan melihat hasilnya pada konsol. Berikut ini adalah tampilan pada browser ketika kode diatas dieksekusi.