Input / Form
Input Components
Bao gồm các components:
- ListInput
- Input - Input element
Input Properties
<ListInput/> 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 |
| minRows | number | Sử dụng khi type="textarea" và resizable={true}. Biểu thị số dòng khởi tạo của textarea trước khi resize ( giá trị từ 1 đến 20) | |
| maxRows | number | Sử dụng khi type="textarea" và resizable={true}. Biểu thị số dòng đạt được sẽ kết thúc resize ( giá trị từ 1 đến 20) | |
| inputStyle | object | Tùy chỉnh style cho input element | |
| clearButton | 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. |
| validateOnBlur | boolean | false | Thực hiện kiểm tra hợp lệ khi người dùng bỏ focus vào input element |
| onValidate | function | Callback thực thi khi input thực hiện kiểm tra hợp lệ, trả về boolean thể hiện giá trị input hợp lệ hay không <ListInput type="email" validate onValidate={(isValid) => setInputValid(isValid)}/> | |
| errorMessage | string | Tùy chỉnh Error message hiển thị khi giá trị của input không hợp lệ | |
| errorMessageForce | 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 | |
| inputId | string | Giá trị thuộc tính ID cho Input element | |
| value | string | number | Giá trị của input.
| |
| defaultValue | 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 |
| calendarParams | object | Object với các Calendar Parameters sử dụng trong trường hợp type="datepicker" | |
| colorPickerParams | object | Object với các Color Picker Parameters sử dụng trong trường hợp type="colorpicker" | |
| textEditorParams | object | Object với các Text Editor Parameters sử dụng trong trường hợp type="texteditor" |
<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 |
| minRows | number | Sử dụng khi type="textarea" và resizable={true}. Biểu thị số dòng khởi tạo của textarea trước khi resize ( giá trị từ 1 đến 20) | |
| maxRows | number | Sử dụng khi type="textarea" và resizable={true}. Biểu thị số dòng đạt được sẽ kết thúc resize ( giá trị từ 1 đến 20) | |
| inputStyle | object | Tùy chỉnh style cho input element | |
| clearButton | 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. |
| validateOnBlur | boolean | false | Thực hiện kiểm tra hợp lệ khi người dùng bỏ focus vào input element |
| onValidate | function | Callback thực thi khi input thực hiện kiểm tra hợp lệ, trả về boolean thể hiện giá trị input hợp lệ hay không | |
| errorMessage | string | Tùy chỉnh Error message hiển thị khi giá trị của input không hợp lệ | |
| errorMessageForce | 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 | |
| inputId | string | Giá trị thuộc tính ID cho Input element | |
| value | string | number | Giá trị của input.
| |
| defaultValue | 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" | |
| calendarParams | object | Object với các Calendar Parameters sử dung trong trường hợp type="datepicker" | |
| colorPickerParams | object | Object với các Color Picker Parameters sử dung trong trường hợp type="colorpicker" | |
| textEditorParams | object | Object với các Text Editor Parameters sử dung trong trường hợp type="texteditor" |
Input/ListInput Events
| Event | Arguments | Prop | Description |
|---|---|---|---|
| focus | (event) | onFocus | Kích hoạt khi người dùng focus vào input. |
| blur | (event) | onBlur | Kích hoạt khi người dùng không còn focus vào input. |
| input | (event) | onInput | Kích hoạt khi giá trị của input thay đổi. Lưu Ý: Input event triggers sau beforeinput, keypress, keyup, keydown events. |
| change | (event) | onChange | 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 |
| inputClear | (event) | onInputClear | Kích hoạt khi người dùng click vào button xóa dữ liệu |
| textareaResize | (event) | onTextareaResize | Kích hoạt khi textarea thay đổi kích thước. event.detail là object bao gồm initialHeight, currentHeight và scrollHeight properties |
| inputEmpty | (event) | onInputEmpty | Kích hoạt khi giá trị của input element thành trống |
| inputNotempty | (event) | onInputNotempty | Kích hoạt khi giá trị của input element khong còn trống |
| calendarChange | (value) | onCalendarChange | 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. |
| textEditorChange | (value) | onTextEditorChange | 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). |
Input Slots
<ListInput/> has additional slots for custom elements:
- default - Trường hợp type="select" hoặc type="textarea" - element sẽ được chèn vào trong select họăc textarea tags.
- info - element sẽ được chèn vào trong container info message
- error-message - element sẽ được chèn vào trong container error message
- label - element sẽ được chèn vào trong container input label
- input - element sẽ thay thế input element (input phải set thành false)
- root-start - element đuợc chèn vào đầu của <li> element
- root / root-end - element được chèn vào cuối của <li> element
- content-start - element đuợc chèn vào đầu của <div className="item-content"> element
- content / content-end - element đuợc chèn vào cuôi của <div className="item-content"> element
- inner-start - element đuợc chèn vào đầu của <div className="item-inner"> element
- inner / inner-end - element đuợc chèn vào cuối của <div className="item-inner"> element
Form Methods
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-framework/react";
Lấy form data dưới dạng object
zmp.form.convertToData(form);
- form - HTMLElement hoặc string (CSS Selector) của form cần lấy data. Required.
- Method trả về object
Điền nội dung form từ data
zmp.form.fillFromData(form, data);
- form - HTMLElement hoặc string (CSS Selector) của form cần điền data. Required.
- data - object object chứa form data. Required.
- 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!