Lompat ke konten Lompat ke sidebar Lompat ke footer

Ionic - Menyimpan Nilai Multiple Checkbox di Reactive Form


Suatu form tidak hanya memiliki input teks, tetapi bisa juga terdapat sebuah pilihan seperti dropdown, radio button atau checkbox. Dan pilihan di dalam form tidak harus satu pilihan, bisa jadi memperbolehkan pengguna untuk memelih lebih dari satu opsi. Sebagai contoh informasi tentang hobi seseorang. Orang mempunyai hobi tidak hanya satu saja, bisa juga lebih. Dan masih banyak contoh lainnya.

Pilihan hobi tersebut bisa ditampilkan dalam bentuk kontrol Checkbox (centang). Checkbox yang dicentang oleh pengguna, nilainya akan tersimpan sebagai pilihan.

Pada kesempatan ini saya akan menjelaskan bagaimana menyimpan nilai multiple checkbox di Reactive From - Ionic Angular.

Perlu digaris bawahi, Reactive Form merupakan salah satu fitur di dalam Angular Framework yang digunakan untuk menangani input form yang nilainya berubah seiring waktu.

Saya buat sebuah proyek Ionic terlebih dulu dengan menjalankan perintah dibawah ini :

ionic start ionCheckboxApp blank --type=angular
Di halaman home.page.html saya edit dengan menambahkan form dan checkbox seperti ini :
<ion-header>
  <ion-toolbar>
    <ion-title> Checkbox App </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form>
    <ion-list>
      <ion-list-header>
        <ion-label>Hobi Anda :</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Nonton Film Action</ion-label>
        <ion-checkbox slot="start"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>Ngoding</ion-label>
        <ion-checkbox slot="start"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>Gowes</ion-label>
        <ion-checkbox slot="start"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>Mancing</ion-label>
        <ion-checkbox slot="start"></ion-checkbox>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

Jika dijalankan tampilan halaman tersebut seperti berikut :


Import modul ReactiveFormModule di halaman app.model.ts

```
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ReactiveFormsModule,
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Kemudian buat obyek FormGroup di home.page.ts.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      hobi: new FormArray([]),
    });
  }
}

checkHobi(event: any) {
  const formArray: FormArray = this.form.get('hobi') as FormArray;
  // Jika hobi dipilih (checked)
  if (event.target.checked) {
    // Menyimpan pilihan di Form Array hobi
    formArray.push(new FormControl(event.target.value));
  } else {
    // Jika hobi tidak dipilih (unchecked)
    let i = 0;
    for (const control of formArray.controls) {
      if (control.value === event.target.value) {
      	// Hapud dari Form Array hobi
        formArray.removeAt(i);
      }
      i++;
    }
  }
}

Edit template halaman home.page.html menjadi seperti ini :

```
<form>
  <ion-list>
    <ion-list-header>
      <ion-label>Hobi Anda :</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label>Nonton Film Action</ion-label>
      <ion-checkbox slot="start" value="Nonton Film Action" (ionChange)="checkHobi($event)"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Ngoding</ion-label>
      <ion-checkbox slot="start" value="Ngoding" (ionChange)="checkHobi($event)"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Gowes</ion-label>
      <ion-checkbox slot="start" value="Gowes" (ionChange)="checkHobi($event)"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Mancing</ion-label>
      <ion-checkbox slot="start" value="Mancing" (ionChange)="checkHobi($event)"></ion-checkbox>
    </ion-item>
  </ion-list>
</form>

<ion-list>
  <ion-list-header>
    <ion-label>Hobi yang dipilih :</ion-label>
  </ion-list-header>
  <ion-item *ngFor="let hobi of form.get('hobi').value">
    <ion-label>{{ hobi }}</ion-label>
  </ion-item>
</ion-list>
```

Setelah dijalankan hasilnya seperti ini.


Demikian sedikit tulisan tentang bagaimana menyimpan nilai multiple checkbox di Reactive Form Ionic Angular. Semoga bermanfaat. Salam sehat & bahagia.

Posting Komentar untuk "Ionic - Menyimpan Nilai Multiple Checkbox di Reactive Form"