lit-formly-forms
v1.0.2
Published
Webcomponent lit-formly-forms following open-wc recommendations
Downloads
4
Readme
lit-formly-forms
An implementation of Angular Formly with web-components (lit)
Installation
npm i lit-formly-forms lit
Form definition
First you have to define the fields of the form as specified by Formly:
const config = [{
id: "1",
key: "name",
type: "input",
templateOptions: {
type: "string",
label: "Name",
required: true
}
}, {
id: '2',
key: 'country',
type: 'select',
templateOptions: {
type: "string",
label: "Country",
required: false,
options: [{ name: 'Italy', value:'1'},
{ name: 'Germany', value:'2'},
{ name: 'Czech Republic', value: '0'},
{ name: 'Austria', value:'3'},
{ name: 'Switzerland', value:'4'},
{ name: 'France', value:'5'},
{ name: 'Spain', value:'6'}]
}, {
id: '3',
key: 'birthdate',
type: 'input',
templateOptions: {
type: "timestamp",
label: "Birth date",
required: false
}]
Then define the model which you want to bind to the form:
const model = {
name: "Franz",
country: "0",
birthdate: '1883-07-03'
}
The model attribute has to match the field key
from the configuration.
Then you can use this definition on a lit-formly-form
element to create a form:
<lit-formly-form .contract=${config} .value="${model}">
</lit-formly-form>
This repository contains storybook with some further examples.