Làm việc với tag trong Angular2 với ng2-tag-input

Lời mở đầu

Hẳn là các bạn không lạ gì angularjs và một số bạn còn lành nghề trong ngôn ngữ này ấy chứ. Chắc hẳn nhiều bạn đã quen thuộc với Angular 1 với sự dễ hiểu và nhiều thư viện hỗ trợ nó và khi bắt đầu với Angular2 thì choáng bởi vì nó khác xa Angular1 từ cú pháp đến cách dùng. Vì thế các thư viện cho Angular1 thì không thế dùng cho Angular2. Ngày hôm nay mình xin giới thiệu đến các về 1 thư viện dành cho angular 2 mà mình được tiếp xúc. Đấy là ng2-tag-input

I : Install and Config

1, Install

Nếu bạn sử dụng npm thì đương nhiên rồi :

npm install ng2-tag-input --save

2, Config

Để config được thư viện này, rất đơn giản . Bạn chỉ cần import nó vào Module của bạn là xong.

import { TagInputModule } from 'ng2-tag-input';

@NgModule({
   imports: [ TagInputModule ]
})
export class MyModule {}

II : API for TagInputComponent

1, Inputs

Model (required) : ngModel - [string[] | TagModel[]]

• Tức là bạn cần cung cấp cho ngModel này 1 mảng string hoặc 1 object để lưu các giá trị tag truyền vào. Object này phải là 1 đối tượng hoặc mảng các đối tượng có cấu trúc nhất định

Nếu bạn muốn lưu nhiều tag thì cần phải sử dụng mảng các đối tượng thì cần chắc chắn 2 vấn đề sau :

• Đối tượng của bạn mặc định sẽ có thuộc tính là value và display . value là để định danh cho tag của bạn (ng2-tag-input sẽ không chấp nhận có 2 đối tượng mà value giống nhau) và display là text sẽ được hiển thị ra màn hình.

• Đương nhiên, nếu bạn không muốn sử dụng object có 2 thuộc tính bên trên, thì cần cung cấp 2 thuộc tính vào input là identifyBy vàdisplayBy . 2 thuộc tính này sẽ giúp bạn định nghĩa lại tên các thuộc tính bên trong ng-model như các bạn muốn .

2: Properties

placeholder - [?string]

• Đoạn text này sẽ hiện ra khi bạn đã add ít nhất 1 tag và muốn add thêm tag khác

• Default: Add tag

secondaryPlaceholder - [?string]

• Đoạn text này hiện ra khi bạn chưa nhập bất kì tag nào vào input.

maxItems - [?number]

• Nhìn nghĩa là các bạn hiểu rồi nhỉ .... Set max tag có thể add được vào input

readonly - [?boolean]

• Chỉ cho phép xem tag và không cho phép add, edit hay xoa tag

separatorKeys - [?number[]]

• Bao gồm mảng các phím có thể định nghĩa tag . Mặc định thì chỉ có phím Enter là để định nghĩa tag. Tức là khi ấn phím này, tag sẽ được add vào object của bạn

transform - [?(item: string) => string]

• Hàm để biến đổi text bạn đã viết thành tag. Nó sẽ chạy khi bạn định nghĩa tag.

• Ví dụ bạn định nghĩa 1 tag là abc nhưng muốn nó hiện ra phải là @abc thì có thể dùng hàm này.

inputId - [?string]

• Nếu bạn muốn thêm id riêng của bản thân để dễ dàng custom css hay js của input tag thì có thể dùng thuộc tính này

inputClass - [?string]

• Tương tự với inputId chỉ khác là add thêm class vào.

addOnBlur - [?boolean]

• Nếu bạn để là TRUE thì nó sẽ thêm ngay tag vào item đã được làm mờ trong list tag gợi ý mà ko cần ấn enter.

• Default: FALSE

pasteSplitPattern - [?string]

• Định nghĩa ký tự sẽ phân chia các object của tag với nhau.

• Default: ,

removable - [?boolean]

• Nếu bạn set FALSE thì sẽ không thể xóa được các tag đã add vào .

• Default: TRUE

editable (experimental) - [?boolean]

• Nếu bạn muốn edit lại nội dung của các tag đã thêm vào thì có thể set thuộc tính này là TRUE.

• Default: FALSE

allowDupes - [?boolean]

• Nếu bạn muốn set nhiều tag có cùng value thì có thể set property này là TRUE

• Default: FALSE

modelAsStrings - [?boolean]

• Nếu bạn muốn các tag add vào chỉ là dạng string mà ko phải lưu theo kiểu object thì có thể set thuộc tính này là TRUE .

• Default: FALSE

3, Validation (optional)

validators - [?Validators[]]

• Một mảng các validator mà bạn có thể tùy chính . Các validate này sẽ chạy khi bạn tùy chỉnh tag và đưa ra message thông báo khi bạn invalidate

errorMessages - [?Object{error: message}]

• Một đối tượng chưa các meesage lỗi mà bạn muốn hiển thị ra cho user xem khi add tag invalidate.

4 , Autocomplete (optional)

onlyFromAutocomplete - [?boolean]

• Nếu bạn chỉ muốn lấy đữ liệu trong list dữ liệu gợi ý thì có thể set TRUE cho thuộc tính này.

identifyBy - [?any]

• Như đã nói ở trên, thuộc tính này sẽ giúp bạn định danh lại tên property value trong object lưu

• Default: value

displayBy - [?string]

• Định danh lại property display

• Default: display

5 : Event

onAdd - [?onAdd($event: string)]

• Event sẽ chạy khi thêm tag.

onRemove - [?onRemove($event: string)]

• Event sẽ chạy khi xóa tag.

onSelect - [?onSelect($event: string)]

• Event sẽ chạy khi chọn tag.

onFocus - [?onFocus($event: string)]

• Event sẽ chạy khi bạn chú ý vào 1 tag

onBlur - [?onBlur($event: string)]

• Event sẽ chạy khi bạn bôi đen vào 1 tag

onTextChange - [?onTextChange($event: string)]

• Event sẽ chạy khi bạn change text của tag.

onPaste - [?onPaste($event: string)]

• Event sẽ chạy khi bạn paste một nội dung gì đó vào input (chỉ hoạt động khi addOnPast = TRUE)

onValidationError - [?onValidationError($event: string)]

• Event chạy khi có validate bị false.

onTagEdited - [?onTagEdited($event: TagModel)]

• Event chạy khi có 1 tag đã bị edit

6: API for TagInputDropdownComponent

showDropdownIfEmpty - [?boolean]

• Nếu bạn set TRUE thì các giá trị gợi ý sẽ ngay lập tức xổ xuống khi bạn vừa nhập ký tự vào input

autocompleteItems - [?string[] | AutoCompleteModel[]]

• Đây là mảng các giá trị gợi ý sẽ được lưu ở đấy

focusFirstElement - [?boolean]

• Nếu bạn set true thì sau khi list các giá trị gợi ý xổ xuống thì sẽ focus đến giá trị đầu tiên của list gợi ý

minimumTextLength - [?number]

• Độ dài văn bản tối thiểu để list gợi ý xổ xuống.

• Default : 1

limitItemsTo - [?number]

• Số gợi ý được hiện ra trong list gợi ý.

identifyBy - [?string]

• Như tag-input , thuộc tính này sẽ định danh lại thuộc tính value trong list gợi ý .

displayBy - [?string]

• Như tag-input , thuộc tính này sẽ định danh lại thuộc tính display trong list gợi ý .

III : Ví dụ

Các bạn có thể xem ví dụ ở đây .

Ok, vậy là mình đã giới thiệu hết về ng2-tag-input rồi, cám ơn các bạn đã đọc hết bài viết này! Hy vọng bài viết sẽ hữu ích cho các bạn .

TÀI LIỆU THAM KHẢO

• https://www.npmjs.com/package/ng2-tag-input