Bagaimana Membuat Kotak Centang di Angular8?

Sekiranya anda membuat jenis aplikasi sehingga sekarang, anda sudah mengetahui betapa pentingnya kotak centang yang ada. Bukan hanya menjadikan input data lebih mudah ke platform mana pun, tetapi juga memudahkan penyortiran data dengan cepat kerana sering kali dikemas dengan fitur daftar. Dalam artikel ini, kita akan melihat cara membuat kotak centang dalam sudut 8 dalam urutan berikut:

• Buat Kotak Centang di Angular8
• Mengesahkan Kotak Centang
• Menambah Kawalan Bentuk ASync

Buat Kotak Centang di Angular8

Untuk menjelaskan langkah-langkah membuat kotak centang di Angular8, mari kita ambil contoh di mana kita mempunyai senarai pesanan untuk dipilih dan kita mesti memberikannya kepada pengguna dalam bentuk kotak centang. Untuk melakukannya, ikuti kod di bawah.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, nama: 'pesanan 4'}]

Dalam kes ini, data sudah ada bersama kami dan oleh itu kami telah menggunakan kod yang dikongsi di atas. Dalam senario dunia nyata, data ini kemungkinan besar akan diimport melalui API.

Dalam contoh ini, kita juga dapat menggunakan bentuk reaktif untuk menjadikan hasil akhirnya lebih bersih dan efisien. Untuk memahami cara melakukan ini, lihat contoh di bawah.

import {Component} dari '@ angular / core' import {FormBuilder, FormGroup} dari '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas eksport AppComponent {form: FormGroup ordersData = [] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({pesanan: []})} serahkan () {...}}

Dalam kod di atas, kami telah menggunakan perkara berikut.

1. Kumpulan Bentuk: yang mewakili satu bentuk.
2. FormControl: yang mewakili satu kemasukan ke dalam satu bentuk.
3. FormArray: yang digunakan untuk mewakili koleksi semua FormControls.

Dalam contoh di atas kita juga boleh menggunakan perkhidmatan FormBuilder untuk membuat bentuk yang akan kelihatan seperti ini.

menggunakan r untuk pembelajaran mesin

serahkan

Dalam contoh di atas, kami telah mengikat borang dengan elemen bentuk dengan menggunakan [formGroup] = 'form'.

Sekarang setelah bentuk asas telah dibuat, mari kita tambahkan beberapa dinamika yang sama melalui penggunaan FormArray seperti yang ditunjukkan di bawah.

import {Component} dari '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} dari '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) kelas eksport AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' pesanan 2 '}, {id: 300, nama:' pesanan 3 '}, {id: 400, nama:' pesanan 4 '}] pembina (formBuilder peribadi: FormBuilder) {this.form = this.formBuilder.group ({ pesanan: FormArray baru ([])}) ini.addCheckboxes ()} addCheckbox peribadi () {this.ordersData.forEach ((o, i) => {const control = FormControl baru (i === 0) // jika item pertama ditetapkan ke benar, yang lain palsu (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (dipilihOrderIds)}}

Dalam contoh di atas, setelah setiap lelaran gelung, kami telah membuat FormControl baru dan mengambil pesanan kami dari FormArray. Kami telah menetapkan kawalan pertama menjadi benar dan dengan itu pesanan pertama telah diperiksa dari senarai secara lalai.

Selepas ini kita perlu mengikat elemen FormArray ke templat ini untuk mendapatkan maklumat pesanan khusus yang perlu dipaparkan kepada pengguna.

{{ordersData [i] .name}} hantar

Pengeluaran:

c ++ menggabungkan kod uri

Mengesahkan Kotak Centang di Sudut8

Lihat contoh di bawah untuk mengetahui cara mengesahkan kotak pilihan.

{{ordersData [i] .name}} Sekurang-kurangnya satu pesanan mesti dipilih hantar ... kelas eksport AppComponent {form: FormGroup ordersData = [...] konstruktor (formBuilder peribadi: FormBuilder) {this.form = this.formBuilder .group ({pesanan: FormArray baru ([], minSelectedCheckboxes (1))}) ini.addCheckboxes ()} ...} fungsi minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // dapatkan senarai nilai kotak pilihan (boolean). peta (control => control.value) // jumlahkan jumlah kotak centang yang diperiksa .reduce ((prev, next) => seterusnya? prev + seterusnya: prev, 0) // jika jumlahnya tidak lebih besar dari minimum, kembalikan mesej ralat kembali jumlah terpilih> = min? null: {diperlukan: true}} pengesahan pengembalian}

Pengeluaran:

Menambah Kawalan Bentuk ASync

Setelah anda mengetahui cara menambah kotak pilihan dinamik, mari kita lihat bagaimana kita dapat menambahkan ASync ke borang ini.

import {Component} dari '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} dari '@ angular / form' import {of} dari 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas eksport AppComponent {form: FormGroup ordersData = [] pembina (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({pesanan: FormArray baru ([], minSelectedCheckboxes (1))}) // pesanan segerak ini.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = FormControl baru (i === 0) // jika item pertama ditetapkan ke benar, yang lain palsu (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, name: 'order 4'}]} submit () {const selectOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectOrderIds)}} ... import {of} dari 'rxjs' ... konstruktor (formBuilder peribadi: FormBuilder) {this.form = ini. formBuilder.group ({pesanan: FormArray baru ([], minSelectedCheckboxes (1))}) // pesanan tidak segerak (boleh menjadi panggilan perkhidmatan http) dari (this.getOrders ()). berlangganan (pesanan => {this.ordersData = pesanan ini.addCheckboxes ()}) // pesanan segerak // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Dengan ini, kami telah sampai ke akhir artikel kami. Setelah anda mengetahui cara menambahkan kotak centang pada sudut 8 anda, kami harap anda dapat menggunakannya dalam pengekodan harian anda.

Sekarang setelah anda mengetahui blok bangunan Angular, lihat oleh Edureka. Angular adalah kerangka kerja JavaScript yang digunakan untuk membuat aplikasi web sisi pelanggan yang berskala, perusahaan, dan prestasi. Dengan penggunaan rangka kerja Angular tinggi, pengurusan prestasi aplikasi digerakkan oleh masyarakat secara tidak langsung mendorong peluang pekerjaan yang lebih baik. Latihan Persijilan Angular bertujuan untuk merangkumi semua konsep baru di sekitar Pembangunan Aplikasi Perusahaan.

idea java terbaik untuk ubuntu