@dreamworld/dw-multi-value-field
v3.0.0
Published
A Multi-value form-field WebComponent, made by LitElement
Downloads
57
Keywords
Readme
dw-multi-value-field
A Multi-value form-field WebComponent, made by LitElement
Demo
Install
npm install @dreamworld/dw-multi-value-field
Usage
By default value is Array of String. And to represent each value(String) in the Array, it renders dw-input
element.
For most of the practical use, you would like to render your custom form-element instead of dw-input
. To do so you need to override the method _formElementTemplate(itemIndex, itemValue, required)
, which should return the lit-html template for the corresponding form element.
For Example:
import { DwMultiValueField } from '../dw-multi-value-field.js';
export class DwMultiValueFieldDemo extends DwMultiValueField {
_formElementTemplate(itemIndex, itemValue, required){
return html `
<dw-date-input
.value="${itemValue}"
.index="${itemIndex}"
?required=${required}"
label="Date"
placeholder="Enter date here">
</dw-date-input>
`
}
}
Properties
name
(String) Name of the form element.value
(Array) Value of the form element. Used as both (input/output). Set to define initial value, and read to get the latest/updated value.label
(String) Label/Caption for this form element.min
(Number), Minimum number of (children) form elements required.max
(Number), Maximum number of (children) form elements can be used. Once, user reaches this limit, ADD button isn't available to the user.allowDuplicates
, whentrue
allows to add duplicate value.