หากคุณสร้างแอปพลิเคชั่นประเภทใดก็ตามจนถึงตอนนี้คุณก็ตระหนักถึงความสำคัญอย่างมากที่ช่องทำเครื่องหมายมีอยู่แล้ว ไม่เพียง แต่ทำให้การป้อนข้อมูลไปยังแพลตฟอร์มใด ๆ ง่ายขึ้นเท่านั้น แต่ยังช่วยอำนวยความสะดวกในการจัดเรียงข้อมูลอย่างรวดเร็วเนื่องจากมักมาพร้อมกับคุณสมบัติรายการ ในบทความนี้เราจะดูวิธีสร้างช่องทำเครื่องหมายใน angular8 ตามลำดับต่อไปนี้:
สร้าง Checkbox ใน Angular8
เพื่ออธิบายขั้นตอนในการสร้างช่องทำเครื่องหมายใน Angular8 ให้เราใช้ตัวอย่างที่เรามีรายการคำสั่งซื้อให้เลือกและเราจะต้องให้ผู้ใช้ในรูปแบบของช่องทำเครื่องหมาย ในการดำเนินการนี้ให้ทำตามรหัสด้านล่าง
const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'สั่งซื้อ 4'}]ในกรณีนี้เรามีข้อมูลอยู่แล้วดังนั้นเราจึงได้ใช้ประโยชน์จากรหัสที่แบ่งปันด้านบน ในสถานการณ์จริงข้อมูลนี้มักจะถูกนำเข้าผ่าน API
ในตัวอย่างนี้เรายังสามารถใช้รูปแบบปฏิกิริยาเพื่อทำให้ผลลัพธ์สุดท้ายสะอาดและมีประสิทธิภาพ เพื่อให้เข้าใจถึงวิธีการดำเนินการนี้โปรดดูตัวอย่างด้านล่าง
oracle pl sql ข้อผิดพลาดในการจัดการแนวทางปฏิบัติที่ดีที่สุด
นำเข้า {Component} จากการนำเข้า '@ angular / core' {FormBuilder, FormGroup} จาก '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ส่งออกคลาส AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} ส่ง () {... }}ในโค้ดด้านบนเราได้ใช้ประโยชน์จากสิ่งต่อไปนี้
- FormGroups: ซึ่งแสดงถึงรูปแบบเดียว
- FormControl: ซึ่งแสดงถึงรายการเดียวในรูปแบบเดียว
- FormArray: ซึ่งใช้เพื่อแสดงคอลเล็กชันของ FormControls ทั้งหมด
ในตัวอย่างข้างต้นเรายังสามารถใช้บริการ FormBuilder เพื่อสร้างแบบฟอร์มได้ซึ่งจะมีลักษณะดังนี้
ส่ง
ในตัวอย่างข้างต้นเราได้ผูกฟอร์มกับองค์ประกอบฟอร์มโดยใช้ [formGroup] =” form”
เมื่อสร้างแบบฟอร์มพื้นฐานแล้วให้เราเพิ่มไดนามิกบางอย่างให้เหมือนกันโดยใช้ FormArray ดังที่แสดงด้านล่าง
นำเข้า {Component} จากการนำเข้า '@ angular / core' {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} จาก '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) ส่งออกคลาส AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' คำสั่ง 2 '}, {id: 300, ชื่อ:' order 3 '}, {id: 400, name:' order 4 '}] ตัวสร้าง (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ คำสั่งซื้อ: FormArray ใหม่ ([])}) this.addCheckboxes ()} addCheckboxes ส่วนตัว () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if รายการแรกตั้งค่าเป็นจริงอื่นเท็จ (this.form.controls.orders เป็น FormArray) .push (ควบคุม)})} ส่ง () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}ในตัวอย่างข้างต้นหลังจากการวนซ้ำทุกครั้งเราได้สร้าง FormControl ใหม่และรับคำสั่งของเราจาก FormArray เราได้ตั้งค่าการควบคุมแรกให้เป็นจริงดังนั้นคำสั่งแรกจึงถูกตรวจสอบจากรายการโดยค่าเริ่มต้น
หลังจากนี้เราจำเป็นต้องผูกองค์ประกอบ FormArray กับเทมเพลตนี้เพื่อให้ได้ข้อมูลคำสั่งซื้อเฉพาะที่ต้องแสดงต่อผู้ใช้
ส่ง {{ordersData [i] .name}}เอาท์พุต:
การตรวจสอบช่องทำเครื่องหมายใน Angular8
ดูตัวอย่างด้านล่างเพื่อเรียนรู้วิธีการตรวจสอบช่องทำเครื่องหมาย
{{ordersData [i] .name}} ต้องเลือกคำสั่งซื้ออย่างน้อย 1 รายการ submit ... export class AppComponent {form: FormGroup ordersData = [... ] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ... } function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // รับรายการค่าช่องทำเครื่องหมาย (บูลีน) .map (control => control.value) // รวมจำนวนช่องทำเครื่องหมายที่เลือก. reduce ((prev, next) => next? prev + ถัดไป: ก่อนหน้า, 0) // หากผลรวมไม่เกินค่าต่ำสุดให้ส่งคืนข้อความแสดงข้อผิดพลาดที่ส่งคืน totalSelected> = min? null: {required: true}} return validator}เอาท์พุต:
การเพิ่ม ASync Form Controls
ตอนนี้คุณรู้วิธีเพิ่มช่องทำเครื่องหมายแบบไดนามิกแล้วให้เราดูว่าเราจะเพิ่ม ASync ลงในแบบฟอร์มเหล่านี้ได้อย่างไร
นำเข้า {Component} จากการนำเข้า '@ angular / core' {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} จากการนำเข้า '@ angular / รูปแบบ' {of} จาก 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ส่งออกคลาส AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // synchronous orders this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // หากรายการแรกตั้งค่าเป็น true มิฉะนั้นจะเป็นเท็จ (this.form.controls.orders เป็น FormArray) )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, name: '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} จาก 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // คำสั่ง async (อาจเป็นการเรียกใช้บริการ http) ของ (this.getOrders ()) = สั่งซื้อ this.addCheckboxes ()}) // คำสั่งซิงโครนัส // this.ordersData = this.getOrders () // this.addCheckboxes ()}ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความของเรา ตอนนี้คุณรู้วิธีเพิ่มช่องทำเครื่องหมายใน angular8 ของคุณแล้วเราหวังว่าคุณจะใช้ประโยชน์จากมันในการเขียนโค้ดแบบวันต่อวัน
ตอนนี้คุณรู้โครงสร้างของ Angular แล้วให้ตรวจสอบไฟล์ โดย Edureka Angular เป็นเฟรมเวิร์ก JavaScript ที่ใช้เพื่อสร้างแอปพลิเคชันเว็บฝั่งไคลเอ็นต์ที่ปรับขนาดได้และมีประสิทธิภาพ เนื่องจากการใช้ Angular framework อยู่ในระดับสูงการจัดการประสิทธิภาพของแอปพลิเคชันจึงเป็นแรงผลักดันจากชุมชนโดยทางอ้อมทำให้เกิดโอกาสในการทำงานที่ดีขึ้น การฝึกอบรมการรับรองเชิงมุมมีวัตถุประสงค์เพื่อครอบคลุมแนวคิดใหม่ ๆ เกี่ยวกับการพัฒนาแอปพลิเคชันขององค์กร