A form element which is used to get serialized data and to perform validation of it's local elements.
npm install @dreamworld/dw-formA form element which is used to get serialized data and to perform validation of it's local elements.
``html`
npm install --save @dreamworld/dw-form
`html@dreamworld/dw-form/dw-form
@import ;`
- serialize() Used to get key/value data of it's children form elements as JSON Object.validate()
- Used to validate child elementsvalidate()
- Invokes method on each form element if it's defined/available.true
- Returns if all elements validate has returned true.
`html`
A Mixin used to create custom form element.
`html`
npm install --save @dreamworld/dw-form
`html@dreamworld/dw-form/dw-form-element
@import ;`
- Triggers register-dw-form-element when attached (from connectedCallback). dw-form uses this event to registerunregister-dw-form-element
this element as custom form element.
- Triggers when detached (from disconnectedCallback). dw-form on this event removesregister-dw-form-element
this element from the custom elements registry it has.
- Stops propagation of event from child elements (from local dom or light dom). It allows todw-form
create composite form elements. Only most souter form element is registered with .
`html`
class CustomElement extends DwFormElement(LitElement) {
...
}
NOTE: Do not forget to call super.connectedCallback() and super.disconnectedCallback() in your element
It's used to show label for checkbox & radio buttons. Used by dw-checkbox and dw-radio-button.
And allows user to select by clicking on the label too.
It also activates a ripple effect upon interacting with the label. For more detail visit
https://github.com/material-components/material-web/tree/master/packages/formfield.
html
npm install --save @dreamworld/dw-form-field
`Usage
js
@import '@dreamworld/dw-form-field'
`
html
`html
// Slotted Label
Hello Slotted Label
`Demo
Enhancements in addition to
> Earlier (in 1.x version) this element was an extension of
but it's no longer uses it.
> But, it implements all the behaviours of it with additional behaviours as described below.- Adds
disabled property
- When set to true, text will be rendered in --dw-theme-disabled-text-color
- Deactivates ripple on click
- Removes left padding from label When label is not available
- Adds a way to change font style. By default it inherits font style from parent element
- Provides a way to align label to top through property.
- From version 3.x it allows you to render label through slotted element.Properties
- label
- alignEnd
- alignTop
- disabled
Custom CSS Properties
| Name | Default | Description |
| ---- | ------ | --------- |
|
--dw-theme-text-primary-on-background | rgba(0, 0, 0, 0.87) | Color of the label text. |
| --dw-theme-disabled-text-color | rgba(0, 0, 0, 0.38) | Text color of a disabled form-field |
| --dw-form-field-label-min-height | auto | Minimum height to label |
| --dw-form-field-label-padding | 0 | Padding of the label (Note: won't work if label is not available) |#### Example css to change label style
`
dw-form-field {
--dw-theme-text-primary-on-background: blue;
--dw-form-field-label-min-height: 40px;
font-size: 18px;
}
dw-composite-form-element
- It's a custom form element. As it's name suggests, used to create a form-element which is composed of other form-elements.
- All the elements for the composition are identified from either local-dom (When used by extending this class) or light-dom.
- Data-type of the property is Object. Object's key represents name of the inner form-element & value represents value of that inner form element.
- When validate() of this element is called, it invokes validate() of all the inner form elements.
- Fires value-changed event when it's value is changed. (OR in other word, value of any inner form element is changed).Installation
`html
npm install --save @dreamworld/dw-form
`Usage (Composition or light-dom)
js
@import '@dreamworld/dw-form/dw-composite-form-element'
`html
`Usage (Extension)
- Create a new form element by extending the class and in the render()` template render all the children elements.