Nếu bạn đang tạo bất kỳ loại ứng dụng nào cho đến thời điểm này, bạn đã nhận thức được tầm quan trọng to lớn của hộp kiểm. Nó không chỉ làm cho việc nhập dữ liệu dễ dàng hơn cho bất kỳ nền tảng nào mà còn tạo điều kiện phân loại dữ liệu nhanh chóng vì nó thường được đóng gói với tính năng danh sách. Trong bài viết này, chúng ta sẽ xem cách tạo hộp kiểm trong angle8 theo trình tự sau:
Tạo hộp kiểm trong Angular8
Để giải thích các bước tạo hộp kiểm trong Angular8, chúng ta hãy lấy một ví dụ trong đó chúng ta có một danh sách các đơn đặt hàng để lựa chọn và chúng ta phải cung cấp danh sách này cho người dùng dưới dạng hộp kiểm. Để làm được điều này, hãy làm theo đoạn mã dưới đây.
const orderData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'order 4'}]Trong trường hợp này, dữ liệu đã có sẵn với chúng tôi và do đó chúng tôi đã sử dụng mã được chia sẻ ở trên. Trong trường hợp thực tế, dữ liệu này rất có thể sẽ được nhập thông qua một API.
Trong ví dụ này, chúng ta cũng có thể sử dụng các dạng phản ứng để làm cho kết quả cuối cùng sạch hơn và hiệu quả hơn. Để hiểu cách thực hiện, hãy xem ví dụ dưới đây.
chức năng tách trong ví dụ java
nhập {Thành phần} từ '@ angle / core' nhập {FormBuilder, FormGroup} từ '@ angle / form' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) xuất lớp AppComponent {form: FormGroup orderData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: []})} Gửi đi() { ... } }Trong đoạn mã trên, chúng tôi đã sử dụng những điều sau đây.
- FormGroups: mà đại diện cho một hình thức duy nhất.
- FormControl: đại diện cho một mục nhập vào một biểu mẫu duy nhất.
- FormArray: được sử dụng để đại diện cho một bộ sưu tập của tất cả các FormControls.
Trong ví dụ trên, chúng ta cũng có thể sử dụng dịch vụ FormBuilder để tạo biểu mẫu có dạng như sau.
Gửi đi
Trong ví dụ trên, chúng ta đã liên kết biểu mẫu với phần tử biểu mẫu bằng cách sử dụng [formGroup] = ”form”.
Bây giờ biểu mẫu cơ bản đã được tạo, chúng ta hãy thêm một số tính năng động cho biểu mẫu tương tự thông qua việc sử dụng FormArray như được hiển thị bên dưới.
nhập {Thành phần} từ '@ angle / core' nhập {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} từ '@ angle / form' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) xuất lớp AppComponent {form: FormGroup orderData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] hàm tạo (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ order: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // nếu mục đầu tiên được đặt thành true, else false (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 (selectOrderIds)}}Trong ví dụ trên, sau mỗi lần lặp lại vòng lặp, chúng ta đã tạo một FormControl mới và nhận đơn đặt hàng của chúng ta từ FormArray. Chúng tôi đã đặt điều khiển đầu tiên là true và do đó, thứ tự đầu tiên đã được chọn ra khỏi danh sách theo mặc định.
Sau đó, chúng ta cần liên kết phần tử FormArray với mẫu này để nhận thông tin đơn hàng cụ thể cần được hiển thị cho người dùng.
Gửi {{orderData [i] .name}}Đầu ra:
Xác thực Hộp kiểm trong Angular8
Hãy xem ví dụ dưới đây để tìm hiểu cách xác thực hộp kiểm.
{{orderData [i] .name}} Phải chọn ít nhất một đơn đặt hàng. submit ... export class AppComponent {form: FormGroup orderData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({order: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // lấy danh sách các giá trị hộp kiểm (boolean) .map (control => control.value) // tổng số hộp kiểm đã chọn .reduce ((trước, tiếp theo) => tiếp theo?. next: prev, 0) // nếu tổng không lớn hơn mức tối thiểu, trả về thông báo lỗi return totalSelected> = min? null: {Required: true}} return validator}Đầu ra:
Thêm điều khiển biểu mẫu ASync
Bây giờ bạn đã biết cách thêm hộp kiểm động, hãy để chúng tôi xem cách chúng tôi có thể thêm ASync vào các biểu mẫu này.
nhập {Thành phần} từ '@ angle / core' nhập {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} từ nhập '@ angle / form' {of} từ 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) xuất lớp AppComponent {form: FormGroup orderData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // đơn hàng đồng bộ this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // nếu mục đầu tiên được đặt thành true, else false (this.form.controls.orders as 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} từ constructor 'rxjs' ... (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // đơn đặt hàng không đồng bộ (có thể là lệnh gọi dịch vụ http) của (this.getOrders ()). subscribe (order => {this.ordersData = order this.addCheckboxes ()}) // đơn hàng đồng bộ // this.ordersData = this.getOrders () // this.addCheckboxes ()}Với điều này, chúng ta đã đi đến phần cuối của bài viết của chúng tôi. Bây giờ bạn đã biết cách thêm hộp kiểm vào angle8 của mình, chúng tôi hy vọng rằng bạn sẽ sử dụng nó trong quá trình viết mã hàng ngày của mình.
Bây giờ bạn đã biết các khối xây dựng của Angular, hãy xem của Edureka. Angular là một khung JavaScript được sử dụng để tạo các ứng dụng web phía máy khách có thể mở rộng, doanh nghiệp và hiệu suất. Với việc áp dụng Angular framework đang ở mức cao, việc quản lý hiệu suất của ứng dụng được cộng đồng thúc đẩy gián tiếp thúc đẩy cơ hội việc làm tốt hơn. Khóa đào tạo Chứng chỉ Angular nhằm mục đích bao quát tất cả các khái niệm mới này về Phát triển ứng dụng doanh nghiệp.