Xử lý Input với Two-way binding

Khi làm việc với những phần tử HTML cho phép nhập liệu như <input>, chúng ta thường muốn hiển thị một thuộc tính trong một component class lên template và cập nhật thuộc tính đó mỗi khi người dùng thay đổi nó. Quá trình này đòi hỏi sự ràng buộc hai chiều chiều (two-way binding). Để chỉ định two-way binding trong Angular chúng ta sử dụng directive ngModel. Chúng ta thêm vào ngModel dấu ngoặc vuông để cho thuộc tính đó liên kết từ thuộc tính của class đến input element, và thêm vào dấu ngoặc đơn để chỉ ra thuộc tính sẽ có một sự kiện thống báo cho thuộc tính của class mỗi khi người dùng nhập dữ liệu.

Ở ví dụ này, mỗi khi người dùng thay đổi giá trị trên input, lập tức giá trị của thuộc tính bên trong class ListComponent cũng sẽ thay đổi giá trị theo, và ngược lại, khi chúng ta thay đổi giá trị thuộc tính listFilter thì giao diện người dùng cũng sẽ ngay lập tức cập nhật giá trị tương ứng.

Cũng như những directive mà chúng ta đã tìm hiểu ở các bài trước, chúng ta cần phải import module, cái mà đã định nghĩa sẵn những directive này cho chúng ta. Đối với directive ngModel, nó không nằm trong BrowserModule mà lại nằm trong FormsModule. Nên tại AppModule chúng ta cần phải import FormsModule vào để các component thuộc AppModule có thể sử dụng được directive ngModel. Chúng ta có thể xem minh họa dưới đây.