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: textarea - Render Textarea select - Render Select datepicker - Render Date Picker colorpicker - Render Color Picker texteditor - Render Text Editor
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. Trường hợp type="datepicker" Giá trị sẽ là mảng các ngày, ví dụ value={[new Date()]}" Trường hợp type="colorpicker" Giá trị là Object thông tin colors, ví dụ value={{hex: '#ff0000'}} Trường hợp type="texteditor" giá trị sẽ là HTML string
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: textarea - Render Textarea select - Render Select datepicker - Render Date Picker colorpicker - Render Color Picker texteditor - Render Text Editor
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. Trường hợp type="datepicker" Giá trị sẽ là mảng các ngày, ví dụ value={[new Date()]}" Trường hợp type="colorpicker" Giá trị là Object thông tin colors, ví dụ value={{hex: '#ff0000'}} Trường hợp type="texteditor" giá trị sẽ là HTML string
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ụ

import React from "react";
import {
  Page,
  Card,
  Navbar,
  List,
  ListInput,
  Button,
  Box,
  zmp
} from "zmp-framework/react";

export default () => {
  const handleOnSubmitForm = (e) => {
    e.preventDefault();
    console.log(zmp.form.convertToData("#my-form"));
  };

  const handleFillForm = (e) => {
    e.preventDefault();
    zmp.form.fillFromData("#my-form", {
      fullName: "John",
      age: 20,
      password: "Aa123456",
      city: 2
    });
  };

  return (
    <Page className='page-inputs page-with-navbar'>
      <Navbar title='Inputs' />
      <Box>
        <Card inset title='Form'>
          <List
            style={{ listStyle: "none" }}
            form
            id='my-form'
            onSubmit={handleOnSubmitForm}
            noHairlines
          >
            <ListInput
              label='Full name'
              type='text'
              placeholder='Enter your full name'
              clearButton
              info='Your full name'
              name='fullName'
              pattern='^[a-zA-Z]{2,30}$'
              required
              errorMessage='Invalid'
              validate
            ></ListInput>
            <ListInput
              label='Age'
              type='number'
              min={1}
              placeholder='Enter your age'
              clearButton
              required
              name='age'
              validate
            ></ListInput>
            <ListInput
              label='Password'
              type='password'
              placeholder='Enter your password'
              clearButton
              required
              info='Password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter'
              name='password'
              errorMessage='Password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter'
              pattern='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$'
              validate
            ></ListInput>
            <ListInput
              label='City'
              type='select'
              placeholder='Select your city'
              name='city'
              validate
            >
              <option value='1'>Hồ Chí Minh</option>
              <option value='2'>Hà Nội</option>
            </ListInput>
            <Box>
              <Button type='submit' typeName='secondary' responsive>
                Get Form Data
              </Button>
            </Box>
            <Box>
              <Button typeName='secondary' responsive onClick={handleFillForm}>
                Fill Form
              </Button>
            </Box>
          </List>
        </Card>
      </Box>
    </Page>
  );
};

Input / Form

Input Components​

Input Properties​

<ListInput/> properties​

<Input/> properties​

Input/ListInput Events​

Input Slots​

Form Methods​

Ví dụ​

Input / Form

Input Components

Input Properties

`<ListInput/>` properties

`<Input/>` properties

Input/ListInput Events

Input Slots

Form Methods

Ví dụ