Kotak centang Angular: Cara menggunakan kotak centang di Angular 13 – Codewithaden

Pola UI yang khas untuk suatu aplikasi adalah kumpulan elemen di mana pengguna harus memilih satu terlalu banyak item yang diberikan. Kami biasanya akan menangani skenario ini dengan daftar kotak centang.

Kotak centang sudut

Itu kotak centang sudut adalah kotak centang reguler yang dapat dilihat sebagai kotak persegi yang dicentang (dicentang) saat diaktifkan. Kami akan membuat daftar kotak centang dengan Angular tetapi membuatnya secara dinamis dari daftar. Kemudian pengguna memilih kotak centang dan mendorongnya ke dalam satu array dan kemudian mengirimkan formulir, dan kami mendapatkan array dari nilai yang dipilih.

Kotak centang HTML digunakan untuk membiarkan pengguna memilih satu atau lebih opsi untuk sejumlah pilihan. Di html, mendefinisikan kotak centang.

Langkah 1: Instal Proyek Angular 13

Jika Anda tidak tahu cara memperbarui Angular CLI, lihat pembaruan Tutorial CLI Angular

Jika Anda tidak terbiasa dengan Angular, maka periksa Tutorial sudut

Sekarang, buat proyek sudut baru menggunakan perintah berikut.

ng new ang 

Sekarang, masuk ke dalam folder dan buka proyek di Kode Studio Visual

Oke, langkah selanjutnya adalah mengimpor Formsmodule dan ReactiveFormsmodule di dalam app.module.ts mengajukan.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Langkah 2: Tentukan data untuk menampilkan kotak centang

Di dalam app.component.ts File, kami akan menentukan data berikut.

// app.component.ts

...
cartoonsData: Cartoon[] = [
    { id: 0, name: 'Tom and Jerry' },
    { id: 1, name: 'Rick and Morty' },
    { id: 2, name: 'Ben 10' },
    { id: 3, name: 'Batman: The Animated Series' }
  ];
... 

Jadi, kami akan menampilkan nilai -nilai nama ini dari array di atas di kotak centang.

Pengguna kemudian memilih kartun favorit mereka dan mengirimkan formulir, dan kemudian dalam fungsi Kirim (), kami akan mendapatkan nilai -nilai yang dipilih tersebut.

Langkah 3: Tentukan tampilan HTML untuk kotak centang

Tulis kode berikut di dalam app.component.html mengajukan.


{{ cartoon.name }}

Dalam kode di atas, kami telah melampirkan formgroup arahan ke membentuk dan menggunakan acara NGSubmit.

Jadi, saat pengguna mengklik tombol kirim, ngsubmit () acara api, dan itu memanggil fungsi pengiriman ().

Kemudian kami telah menggunakan NGFOR Directive Untuk menampilkan daftar kotak centang dinamis dengan acara Onchange ().

Jika pengguna mengklik kotak centang, maka acara perubahan () akan menembak, dan kemudian Nama Kartun dan diperiksa Nilai diteruskan ke fungsi onchange () yang terkait dengan peristiwa itu.

Kami akan mendefinisikan fungsi onchange () di dalam app.component.ts mengajukan

Jangan menyimpan file dan pergi ke browser jika Anda menjalankan proyek karena Anda akan mendapatkan kesalahan.

Sekarang, mari kita menuju ke langkah terakhir.

Langkah 4: Tentukan fungsi onchange () dan kirim ()

Oke, jadi sekarang kami memiliki kami app.component.html dan app.module.ts file lengkap.

Kita perlu mendefinisikan dua fungsi utama untuk melacak nilai kotak centang dan mendapatkan nilai -nilai yang diperiksa.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

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

export interface Cartoon {
  id: number;
  name: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  cartoonsData: Cartoon[] = [
    { id: 0, name: 'Tom and Jerry' },
    { id: 1, name: 'Rick and Morty' },
    { id: 2, name: 'Ben 10' },
    { id: 3, name: 'Batman: The Animated Series' }
  ];

  constructor(private fb: FormBuilder) { }

  onChange(name: string, isChecked: boolean) {
    const cartoons = (this.form.controls.name as FormArray);

    if (isChecked) {
      cartoons.push(new FormControl(name));
    } else {
      const index = cartoons.controls.findIndex(x => x.value === name);
      cartoons.removeAt(index);
    }
  }

  ngOnInit() {
    this.form = this.fb.group({
      name: this.fb.array([])
    });
  }

  submit() {
    console.log(this.form.value.name);
  }
}
 

Dalam kode di atas, kami pertama kali mengimpor empat formulir modul dari paket formulir.

  1. Formbuilder : Ini membuat AbstractControl dari konfigurasi yang ditentukan pengguna.
  2. Formgroup : Ini melacak nilai dan keadaan validitas dari sekelompok FormControl contoh
  3. Formarray : Melacak keadaan nilai dan validitas dari array FormControl, Formgroup, atau Formarray Instances
  4. FormControl : Ini melacak nilai kontrol formulir individu dan status validasi.

Kemudian kami telah menentukan kartun antarmuka, yang merupakan jenis data kotak centang.

Kemudian mendefinisikan konstruktor dan membuat instance FormBuilder.

Pada langkah berikutnya, kami telah mendefinisikan fungsi onchange (), yang membutuhkan dua parameter.

  1. nama
  2. ischecked

Jika nilai kotak centang tertentu diperiksa, kami mendorong nilai -nilai yang diperiksa ke FormArray dan menghapus nilai jika pengguna menghapus centang opsi kotak centang.

Di dalam Kirimkan() Fungsi, kami mendapatkan array nilai yang diperiksa dan mencatatnya di konsol.

Akhirnya, lihat outputnya.

Angular

Anda dapat melihat di konsol bahwa array dua nilai dicatat, yang berarti kami telah berhasil memeriksa nilai -nilai di dalam array.

Sekarang, kami dapat mengirim array itu ke server dan menyimpannya di dalam database.

Itu saja untuk contoh kotak centang sudut.

Lihat juga

Crud sudut

Bentuk sudut

Unggah file sudut

HTTPClient Angular

Observable sudut

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *