@apass/form-builder v1.2.3
form-builder
Инструмент для быстрого создания интерфейсов форм
Основная идея в том, чтобы один раз описать набор полей и схем данных для них, а потом просто строить из них формы, как из кирпичей.
Layout – описание расположения полей в грид-системе. Описываем на какой строке будут находиться те или иные колонки, их респонсивность и какое поле внутри нее мы хотим отобразить.
Schema – схема данных для поля. Это могут быть данные для автокомплита запрашиваемые с бекенда или просто набор опций для селекта или радио кнопок.
Fields – Набор полей (кирпичей) из которых будет строиться форма. Используем дефолтный набор с классическими HTML инпутами или подключить, например, material-ui.
Installation
npm install @apass/form-builder --saveGetting started
import FormBuilder from 'form-builder'В качестве примера возьмем классическую форму обратной связи.
Начнем с того, что опишем лейаут формы. Лейаут строится на базе классической 12 колоночной грид системе. В основе лежит библиотека https://github.com/sealninja/react-grid-system.
- Первый ряд: фамилия, имя.
- Второй ряд: дата рождения.
- Третий ряд: тип вопроса.
- Четвертый ряд: текст вопроса.
- Пятый ряд: согласие на обработку данных.
const MyForm: React.FC = () => {
return (
<FromBuilder
layout={[
[ 'name|sm:6', 'surname|sm:6' ],
[ 'birth|sm-content' ]
[ 'questionType' ],
[ 'question' ]
[ 'isAgree' ],
]}
/>
)
}После того как мы описали лейаут, описываем что из себя представляют поля. Для этого нам потребуется схема.
- Поля name и surname это простые текстовые инпуты, соответственно добавляем в схему два ключа name и surname с типом text, а в лейблы пишем "Имя" и "Фамилия".
- Поле birth должно быть выбором даты указываем тип date.
- Для поля questionType нам потребуются опции типов вопросов, добавляем их в схему с ключем options
- Поле question должно быть большим, соответственно указываем тип textarea и пишем количество рядов.
- Поле isAgree это чекбокс, указываем тип checkbox.
const MyForm: React.FC = () => {
return (
<FromBuilder
layout={[
[ 'name|sm:6', 'surname|sm:6' ],
[ 'birth|sm-content' ]
[ 'questionType' ],
[ 'question' ]
[ 'isAgree' ],
]}
schema={{
name: { type: 'text', label: 'Имя' },
surname: { type: 'checkbox', label: 'Фамилия' },
birth: { type: 'date', label: 'Дата рождения'},
questionType: {
type: 'select',
label: 'Тип вопроса',
options: [
{ label: 'Консультация', value: 1 },
{ label: 'Покупка', value: 2 },
{ label: 'Статус заказа', value: 3 },
]
},
question: { type: 'textarea', label: 'Вопрос'},
isAgree: { type: 'checkbox', label: 'Согласен с ФЗ-66'},
}}
/>
)
}Форма практически готова, не хватает только валидации полей. Для этого нам понадобится validation где мы пишем условия для необходимых полей. Полный список правил можно посмотреть тут https://github.com/mikeerickson/validatorjs/blob/master/README.md. Для валидации используется библиотека validatejs с laravel validator подобным синтаксисом. Для вывода ошибок на русском языке не забудьте указать validationLang='ru'.
const MyForm: React.FC = () => {
return (
<FromBuilder
layout={[
[ 'name|sm:6', 'surname|sm:6' ],
[ 'birth|sm-content' ]
[ 'questionType' ],
[ 'question' ]
[ 'isAgree' ],
]}
schema={{
name: { type: 'text', label: 'Имя' },
surname: { type: 'checkbox', label: 'Фамилия' },
birth: { type: 'date', label: 'Дата рождения'},
questionType: {
type: 'select',
label: 'Тип вопроса',
options: [
{ label: 'Консультация', value: 1 },
{ label: 'Покупка', value: 2 },
{ label: 'Статус заказа', value: 3 },
]
},
question: { type: 'textarea', label: 'Вопрос'},
isAgree: { type: 'checkbox', label: 'Согласен с ФЗ-66'},
}}
validation={{
name: 'required|max:128',
surname: 'max:128',
birth: 'required',
question: 'required|max:1024',
isAgree: 'required',
}}
validationLang='ru'
/>
)
}Итак, форма готова. Теперь нужно решить, как мы будем управлять вводимыми данными – controlled или uncontrolled. В примере делаем форму контролируемой передав ей value с изначальным значением полей. Затем добавляем обработчик изменений onChange чтобы записывать каждое изменение в стейт.
const MyForm: React.FC = () => {
const [formValue, setFormValue] = useState({
name: '',
surname: '',
birth: '',
questionType: '',
question: '',
isAgree: '',
})
const handleChange = useCallback(e => {
const { name, value } = e.target
setFormValue(prev => ({ ...prev, [name]: value }))
}, [])
return (
<FromBuilder
layout={[
...
]}
schema={{
...
}}
validation={{
...
}}
validationLang='ru'
value={formValue}
onChange={handleChange}
/>
)
}Последний штрих - добавление кнопки отправки и обработчика onSubmit.
const MyForm: React.FC = () => {
const [formValue, setFormValue] = useState({
name: '',
surname: '',
birth: '',
questionType: '',
question: '',
isAgree: '',
})
const handleChange = useCallback(e => {
const { name, value } = e.target
setFormValue(prev => ({ ...prev, [name]: value }))
}, [])
const handleSubmit = useCallback((e, formValue, errors, formData) => {
fetch('https://example.com/question', {
method: 'POST',
body: formData,
})
}, [])
return (
<FromBuilder
layout={[
...
]}
schema={{
...
}}
validation={{
...
}}
validationLang='ru'
value={formValue}
onChange={handleChange}
onSubmit={handleSubmit}
>
<button>Отправить</button>
</FormBuilder>
)
}