Jika Anda telah membuat semua jenis aplikasi sampai sekarang, Anda sudah menyadari pentingnya kotak centang yang sangat besar. Tidak hanya membuat input data lebih mudah ke platform apa pun, tetapi juga memfasilitasi penyortiran data yang cepat karena sering kali dikemas dengan fitur daftar. Pada artikel ini, kita akan melihat cara membuat kotak centang di angular8 dengan urutan berikut:
Buat Kotak Centang di Angular8
Untuk menjelaskan langkah-langkah membuat kotak centang di Angular8, mari kita ambil contoh di mana kita memiliki daftar pesanan untuk dipilih dan kita harus ini ke pengguna dalam bentuk kotak centang. Untuk melakukannya, ikuti kode di bawah ini.
const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'pesan 4'}]Dalam hal ini, data sudah ada bersama kami dan oleh karena itu kami telah menggunakan kode yang dibagikan di atas. Dalam skenario dunia nyata, data ini kemungkinan besar akan diimpor melalui API.
cara membuat aplikasi tenaga penjualan
Dalam contoh ini, kita juga dapat menggunakan bentuk reaktif untuk membuat hasil akhir lebih bersih dan efisien. Untuk memahami cara melakukan ini, lihat contoh di bawah ini.
impor {Komponen} dari '@ angular / core' impor {FormBuilder, FormGroup} dari '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas ekspor AppComponent {form: FormGroup ordersData = [] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} Kirimkan() { ... } }Dalam kode di atas, kami telah memanfaatkan yang berikut ini.
- FormGroups: yang mewakili satu bentuk.
- FormControl: yang mewakili satu entri ke dalam satu formulir.
- FormArray: yang digunakan untuk mewakili kumpulan semua FormControls.
Dalam contoh di atas kita juga dapat menggunakan layanan FormBuilder untuk membuat formulir yang akan terlihat seperti ini.
Kirimkan
Pada contoh di atas, kita telah mengikat form dengan elemen form dengan menggunakan [formGroup] = ”form”.
Sekarang bentuk dasar telah dibuat, mari kita tambahkan beberapa dinamika yang sama melalui penggunaan FormArray seperti yang ditunjukkan di bawah ini.
melewati nilai di java
impor {Komponen} dari '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} dari '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) kelas ekspor AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ pesanan: FormArray baru ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if item pertama disetel ke benar, selain itu salah (this.form.controls.orders sebagai FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}Dalam contoh di atas, setelah setiap perulangan iterasi kami telah membuat FormControl baru dan mengambil pesanan kami dari FormArray. Kami telah menyetel kontrol pertama menjadi true dan dengan demikian urutan pertama telah dicentang dari daftar secara default.
Setelah ini kita perlu mengikat elemen FormArray ke template ini untuk mendapatkan informasi pesanan khusus yang perlu ditampilkan kepada pengguna.
Kirim {{ordersData [i] .name}}Keluaran:
Memvalidasi Kotak Centang di Angular8
Lihat contoh di bawah ini untuk mempelajari cara memvalidasi kotak centang.
{{ordersData [i] .name}} Setidaknya satu pesanan harus dipilih kirim ... export class AppComponent {form: FormGroup ordersData = [...] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({pesanan: baru FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} fungsi minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // dapatkan daftar nilai kotak centang (boolean) .map (control => control.value) // jumlahkan jumlah kotak centang yang dicentang .reduce ((prev, next) => next? prev + next: prev, 0) // jika total tidak lebih besar dari minimum, kembalikan pesan kesalahan return totalSelected> = min? null: {wajib: true}} validator kembali}Keluaran:
Menambahkan Kontrol Formulir ASync
Sekarang setelah Anda mengetahui cara menambahkan kotak centang dinamis, mari kita lihat bagaimana kita dapat menambahkan ASync ke formulir ini.
impor {Komponen} dari '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} dari '@ angular / forms' import {of} dari 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas ekspor AppComponent {form: FormGroup ordersData = [] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // perintah sinkronis this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // jika item pertama disetel ke true, selain itu false (this.form.controls.orders sebagai FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, nama: 'order 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... import {of} dari 'rxjs' ... konstruktor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // async orders (bisa jadi panggilan layanan http) dari (this.getOrders ()). subscribe (orders => {this.ordersData = pesanan this.addCheckboxes ()}) // perintah sinkron // this.ordersData = this.getOrders () // this.addCheckboxes ()}Dengan ini, kita sampai pada akhir artikel kita. Sekarang setelah Anda tahu cara menambahkan kotak centang ke angular8 Anda, kami berharap Anda akan memanfaatkannya dalam pengkodean sehari-hari.
Sekarang setelah Anda mengetahui blok penyusun Angular, lihat oleh Edureka. Angular adalah kerangka kerja JavaScript yang digunakan untuk membuat aplikasi web sisi klien yang skalabel, perusahaan, dan kinerja. Dengan adopsi kerangka kerja Angular yang tinggi, manajemen kinerja aplikasi didorong oleh komunitas secara tidak langsung mendorong peluang kerja yang lebih baik. Pelatihan Sertifikasi Angular bertujuan untuk mencakup semua konsep baru ini seputar Pengembangan Aplikasi Perusahaan.
apa itu utas daemon