Angular: Form in Details (Part 1)

Form có lẽ là một trong những thành phần quan trọng bậc nhất trong bất kỳ một ứng dụng web nào. Cho dù chúng ta có thể nhận được những dữ liệu theo những cách khác nhau từ phía người dùng như click, hover,... tuy nhiên, form vẫn là một phuơng pháp mạnh mẽ và trực quan nhất để chúng ta có thể thu thập thông tin từ phía người dùng

Nhìn từ phía giao diện, form có vẻ rất đơn giản và rõ ràng: chúng ta có 1 thẻ <input>, người dùng điền các thông tin được yêu cầu, bấm submit, nhưng vì sao xử lý form lại thường xuyên khá khó khăn và đòi hỏi chúng ta bỏ khá nhiều công sức để xử lý chúng một cách hiệu quả?

Nếu xem xét kỹ hơn vấn đề, form có thể rất phức tạp, sau đây là một số lý do: - các trường input của form thay đổi dữ liệu trên cả server và client - khi thay đổi các giá trị được nhập vào form, những giá trị thay đổi đó cần được thể hiện ở các nơi khác trên trang - người dùng được toàn quyền nhập các giá trị vào form, do vậy, chúng ta cần một số phuơng pháp để validates các giá trị đó - giao diện phải hiển thị rõ ràng các lỗi và giải thích tường tận cho người dùng - một số trường của form phụ thuộc vào giá trị của các trường khác, do đó, ta cần xử lý logic các giá trị này - tất nhiên, test là một buớc không thể thiếu, tuy nhiên, chúng ta cần test các form mà không phụ thuộc vào các DOM selector - ... - Một điều đáng mừng cho các bạn sử dụng Angular, đó là ở phiên bản hiện tại (Angular 4), chúng ta được cung cấp một cách khá đầy đủ các công cụ để có thể giải quyết các vấn đề đã nêu. Vì vậy, trong bài viết này, chúng ta sẽ từng bước xây dựng form từ form cơ bản nhất, từ đó xây dựng các forms khác có sự phức tạp hơn về logic ở các bài tiếp theo.

Đây là 2 đối tượng cơ bản nhất để chúng ta làm việc với form trong Angular

FormControl

FormControl đại diện cho 1 trường input, đây là đơn vị nhỏ nhất của 1 form trong Angular FormControl chứa các giá trị của trường hiện tại, trạng thái (state) của trường, ví dụ như valid, dirty, hoặc có lỗi hay không. Để xây dựng 1 các form, chúng ta tạo nhiều các FormControls này, thêm các metadata và các thành phần logic cho chúng Tuơng tự với rất nhiều các thành phần khác trong Angular, chúng ta có một class (FormControl) mà sẽ được gắn vào DOM bằng 1 attributes (formControl), ví dụ: <input type="text" [formControl]="name"/> dòng trên sẽ tạo mới một đối tượng FormControl trong phạm vi của form chúng ta đang tạo, cụ thể hơn, mình sẽ đề cập ở phần dưới

FormGroup

Hầu hết các form đều có nhiều hơn một trường, do vậy, Angular cung cấp cho chúng ta một cách để quản lý các FormControls là FormGroup. Hãy thử xét một trường hợp cho thấy sự cần thiết của FormGroup: Khi form của chúng ta có nhiều trường, ta cần kiểm tra tính hợp lệ của các trường đó. Nếu không có FormGroup, chúng ta buộc phải lặp qua các phần tử mảng FormControls và kiểm tra tính hợp lệ của từng FormControl, khá phức tạp khi mỗi FormControl có thể lại có một cách kiểm tra tính hợp lệ khác nhau.

Chính vì thế, để giải quyết vấn đề này, FormGroup được tạo ra để cung cấp một interface giúp chúng ta có thể thao tác dễ dàng với một tập hợp các FormControls

Cách tạo một FormGroup, rất đơn giản:

let personalInfo = new FormGroup({
	firstName: new FormControl('Phuong');
    lastName: new FormControl('Tran');
    zip: new FormControl('100000');
})

FormGroup và FormControl có chung một lớp cha (AbstractControl), điều đó có nghĩa, chúng ta cũng có thể kiểm tra status và value của personnalInfo như cách đã làm với FormControl:

personalInfo.value // { firstName: "Phuong", lastName: "Tran", zip: "100000"}
personalInfo.errors // StringMap<string, any> of errors
personalInfo.dirty //false
personalInfo.valid // true

Chú ý rằng, khi chúng ta lấy value của FormGroup, chúng ta nhận được một đối tượng với 1 cặp key-value ứng với từng FormControl, điều này rất hữu ích do chúng ta không cần lặp qua các FormControls để lấy từng giá trị của chúng

Xây dựng form

Chúng ta sẽ cùng nhau xây dựng một forms để có thể có cái nhìn rõ nét hơn về form, mình sẽ giải thích chi tiết ở từng bước trong khi chúng ta làm Form đầu tiên của chúng ta sẽ rất đơn giản, chỉ gồm một label, một trường input và một nút submit mà thôi.

1. Import các thư viện cần thiết

Để có thể sử dụng thư viện forms trong Angular, chúng ta cần import chúng vào trong NgModule

MÌnh xin nói thêm, trong Angular, có 2 kiểu forms mà chúng ta có thể dùng: FormsModule và ReactiveFormsModule, trong bài này, mình sẽ ưu tiên giới thiệu FormsModule trước do nó dễ tiếp cận hơn và dễ hiểu hơn 1 chút