Input / Form
Cú pháp
<zmp-list-input> <zmp-input>
Zalo Mini App framework cung cấp các component input để người dùng nhập dữ liệu. Các component này được sử dụng trong <form> hoặc <zmp-list>, và có thể sử dụng Form Methods để lấy data từ input.
Properties
Input properties
| Prop | Type | Default | Description |
|---|---|---|---|
| wrap | boolean | true | Xác định input element được bao bởi <div className="input"> element hoặc không. |
| type | string | Input type. Tất cả input type mặc định của HTML5: text, password, number,... Ngoài ra cò có một số type đặc biệt:
| |
| resizable | boolean | false | Trường hợp type là textarea thì resizable cho phép textarea element có khả năng thay đổi kích thước |
| min-rows | number | Sử dụng khi type="textarea" và resizable. Biểu thị số dòng khởi tạo của textarea trước khi resize ( giá trị từ 1 đến 20) | |
| max-rows | number | Sử dụng khi type="textarea" và resizable. Biểu thị số dòng đạt được sẽ kết thúc resize ( giá trị từ 1 đến 20) | |
| input-style | object | Tùy chỉnh style cho input element | |
| clear-button | boolean | false | Thêm nút xóa giá trị của input khi người dùng click/press |
| validate | boolean | false | Cho phép input element thực hiện kiểm tra hợp lệ khi giá trị input thay đổi dựa vao pattern cụ thể hoặc mặc định của HTML5 . Trường hợp muốn tùy chỉnh việc kiểm tra hợ lệ, set validation thành false và sử dụng error-message cùng với error-message-force props. |
| validate-on-blur | boolean | false | Thực hiện kiểm tra hợp lệ khi người dùng bỏ focus vào input element |
| error-message | string | Tùy chỉnh Error message hiển thị khi giá trị của input không hợp lệ | |
| error-message-force | boolean | false | Buộc input element thông báo lỗi không hợp lệ |
| info | string | Thêm thông tin thêm về input element | |
| name | string | Input name | |
| placeholder | string | Input placeholder | |
| id | string | Giá trị thuộc tính ID cho Input wrapper element | |
| input-id | string | Giá trị thuộc tính ID cho Input element | |
| value | string | number | Giá trị của input.
| |
| default-value | string | number | Giá trị mặc định của input, trong trường hợp sử dụng uncontrolled component | |
| inputmode | string | Giá trị thuộc tính input's native "inputmode" | |
| size | string | number | Giá trị thuộc tính input's native "size" | |
| pattern | string | Giá trị thuộc tính input's native "pattern" | |
| accept | string | number | Giá trị thuộc tính input's native "accept" | |
| autocomplete | string | Giá trị thuộc tính input's native "autocomplete" | |
| autofocus | boolean | false | Giá trị thuộc tính input's native "autofocus" |
| autosave | string | Giá trị thuộc tính input's native "autosave" | |
| disabled | boolean | false | Vô hiệu hóa input element |
| max | string | number | Giá trị thuộc tính input's native "max" | |
| min | string | number | Giá trị thuộc tính input's native "min" | |
| step | string | number | Giá trị thuộc tính input's native "step" | |
| maxlength | string | number | Giá trị thuộc tính input's native "maxlength" | |
| minlength | string | number | Giá trị thuộc tính input's native "minlength" | |
| multiple | boolean | false | Giá trị thuộc tính input's native "multiple" |
| readonly | boolean | false | Readonly Input |
| required | boolean | false | Required Input |
| tabindex | string | number | Giá trị thuộc tính input's native "tabindex" | |
| calendar-params | object | Object với các Calendar Parameters sử dung trong trường hợp type="datepicker" | |
| color-picker-params | object | Object với các Color Picker Parameters sử dung trong trường hợp type="colorpicker" | |
| text-editor-params | object | Object với các Text Editor Parameters sử dung trong trường hợp type="texteditor" |
List Input properties
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Input's label | |
| input | boolean | true | Render input element hoặc không |
| type | string | Input type. Tất cả input type mặc định của HTML5: text, password, number,... Ngoài ra cò có một số type đặc biệt:
| |
| resizable | boolean | false | Trường hợp type là textarea thì resizable cho phép textarea element có khả năng thay đổi kích thước |
| min-rows | number | Sử dụng khi type="textarea" và resizable. Biểu thị số dòng khởi tạo của textarea trước khi resize ( giá trị từ 1 đến 20) | |
| max-rows | number | Sử dụng khi type="textarea" và resizable. Biểu thị số dòng đạt được sẽ kết thúc resize ( giá trị từ 1 đến 20) | |
| input-style | object | Tùy chỉnh style cho input element | |
| clear-button | boolean | false | Thêm nút xóa giá trị của input khi người dùng click/press |
| validate | boolean | false | Cho phép input element thực hiện kiểm tra hợp lệ khi giá trị input thay đổi dựa vao pattern cụ thể hoặc mặc định của HTML5 . Trường hợp muốn tùy chỉnh việc kiểm tra hợ lệ, set validation thành false và sử dụng error-message cùng với error-message-force props. |
| validate-on-blur | boolean | false | Thực hiện kiểm tra hợp lệ khi người dùng bỏ focus vào input element |
| error-message | string | Tùy chỉnh Error message hiển thị khi giá trị của input không hợp lệ | |
| error-message-force | boolean | false | Buộc input element thông báo lỗi không hợp lệ |
| info | string | Thêm thông tin thêm về input element | |
| name | string | Input name | |
| placeholder | string | Input placeholder | |
| id | string | Giá trị thuộc tính ID cho Input wrapper element | |
| input-id | string | Giá trị thuộc tính ID cho Input element | |
| value | string | number | Giá trị của input, tương tự property value của component Input | |
| default-value | string |number | Giá trị mặc định của input, trong trường hợp sử dụng uncontrolled component | |
| inputmode | string | Giá trị thuộc tính input's native "inputmode" | |
| size | string | ||
| number | Giá trị thuộc tính input's native "size" | ||
| pattern | string | Giá trị thuộc tính input's native "pattern" | |
| accept | string | number | Giá trị thuộc tính input's native "accept" | |
| autocomplete | string | Giá trị thuộc tính input's native "autocomplete" | |
| autofocus | boolean | false | Giá trị thuộc tính input's native "autofocus" |
| autosave | string | Giá trị thuộc tính input's native "autosave" | |
| disabled | boolean | false | Vô hiệu hóa input element |
| max | string | number | Giá trị thuộc tính input's native "max" | |
| min | string |number | Giá trị thuộc tính input's native "min" | |
| step | string | number | Giá trị thuộc tính input's native "step" | |
| maxlength | string |number | Giá trị thuộc tính input's native "maxlength" | |
| minlength | string | number | Giá trị thuộc tính input's native "minlength" | |
| multiple | boolean | false | Giá trị thuộc tính input's native "multiple" |
| readonly | boolean | false | Readonly Input |
| required | boolean | false | Required Input |
| tabindex | string | number | Giá trị thuộc tính input's native "tabindex" | |
| wrap | boolean | true | ListInput element sẽ được bao bởi <li> element |
| calendar-params | object | Object với các Calendar Parameters sử dụng trong trường hợp type="datepicker" | |
| color-picker-params | object | Object với các Color Picker Parameters sử dụng trong trường hợp type="colorpicker" | |
| text-editor-params | object | Object với các Text Editor Parameters sử dụng trong trường hợp type="texteditor" |
Events
| Event | Description |
|---|---|
| @focus | Kích hoạt khi người dùng focus vào input. |
| @blur | Kích hoạt khi người dùng không còn focus vào input. |
| @input | Kích hoạt khi giá trị của input thay đổi. Lưu Ý: Input event triggers sau beforeinput, keypress, keyup, keydown events. |
| @change | Kích hoạt khi giá trị của input thay đổi sau khi người dùng không còn focus (blur) vào input |
| @input-clear | Kích hoạt khi người dùng click vào button xóa dữ liệu |
| @textarea-resize | Kích hoạt khi textarea thay đổi kích thước. event.detail là object bao gồm initialHeight, currentHeight và scrollHeight properties |
| @input-empty | Kích hoạt khi giá trị của input element thành trống |
| @input-notempty | Kích hoạt khi giá trị của input element khong còn trống |
| @calendar-change | Kích hoạt type="datepicker" khi giá trị của calendar thay đổi. Nhận vào mảng với các ngày được chọn. |
| @text-editor-change | Kích hoạt khi type="texteditor" giá trị của Text Editor thay đổi. Nhận vào giá trị của text editor (HTML string). |
Slots
| Slot | Description |
|---|---|
| default | Đối với type="select" hoặc type="textarea" - element sẽ được chèn vào trong select họăc textarea tags. |
| info | Slot sẽ được chèn vào trong container info message |
| error-message | Slot sẽ được chèn vào trong container error message |
| label | Slot sẽ được chèn vào trong container input label |
| input | Slot sẽ thay thế input element (input phải set thành false) |
| root-start | Slot đuợc chèn vào đầu của <li> element |
| root / root-end | Slot được chèn vào cuối của <li> element |
| content-start | Slot đuợc chèn vào đầu của <div className="item-content"> element |
| content / content-end | Slot đuợc chèn vào cuôi của <div className="item-content"> element |
| inner-start | Slot đuợc chèn vào đầu của <div className="item-inner"> element |
| inner / inner-end | Slot đuợc chèn vào cuối của <div className="item-inner"> element |
Form Methods
Zalo Mini App cung cấp các methods để làm việc với input và form, trong đó convertToData và fillFormData là 2 methods hữu ích giúp lấy form data và điền nội dung cho form:
import { zmp } from 'zmp-vue';
Lấy form data dưới dạng object
zmp.form.convertToData(form);
- form (required) - HTMLElement hoặc string (CSS Selector) của form cần lấy data.
- Method trả về object
Điền nội dung form từ data
zmp.form.fillFromData(form, data);
- form (required) - HTMLElement hoặc string (CSS Selector) của form cần điền data.
- data (required) - object object chứa form data.
- Lưu ý mỗi input cần cung cấp thuộc tính name, name sẽ trở thành object filed khi lấy data cũng như điền nội data
- Checkboxes và "multiple" selects biểu diễn dưới dạng mảng (Arrays)
Ví dụ
Code demo fallback when rendering server side!