<dy-form>
Example
Loading...
<dy-form style=${"width: 100%;"} @change=${(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}}> <dy-form-item name="name" label="Name" multiple></dy-form-item> <dy-form-item name="password" label="Password" type="password"></dy-form-item> <dy-form-item name="email" label="Email" autofocus></dy-form-item> <dy-form-item name="phone" label="Phone"></dy-form-item> <dy-form-item name="date" label="Date" type="date-time"></dy-form-item> <dy-form-item name="range" label="Date Range" type="date-range"></dy-form-item> <dy-form-item name="agree" label="Agree terms" type="checkbox"></dy-form-item> <dy-form-item name="notifications" label="Enable notifications" type="switch"></dy-form-item> </dy-form>
Loading...
<dy-form
style=${"width: 100%;"}
.inline=${true}
@change=${(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}}> <dy-form-item name="name" label="Name" multiple></dy-form-item> <dy-form-item name="email" label="Email"></dy-form-item> <dy-form-item name="phone" label="Phone"></dy-form-item> <dy-form-item name="agree" label="Agree" type="checkbox"></dy-form-item> <dy-form-item name="notifications" label="Notifications" type="switch"></dy-form-item> </dy-form>
<dy-form> API
Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
inline(inline) |
Yes | boolean |
|
change |
Emitter<Data> |
event order: change, itemchange | |
get items |
DuoyunFormItemElement[] |
||
get elements |
Record<string, DuoyunFormItemElement | undefined> |
||
get data |
Data |
Instance Methods
| Method | Type |
|---|---|
valid |
() => Promise<boolean> |
clearInvalidMessage |
() => void |
Other
| Type | Value |
|---|---|
| Event | change |
<dy-form-item> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
type(type) |
Yes | | 'text' | 'password' | 'date' | 'date-time' | 'date-range' | 'number' | 'checkbox' | 'checkbox-group' // value is array | 'switch' | 'picker' | 'radio-group' | 'select' | 'textarea' | 'slot' |
|
multiple(multiple) |
Yes | boolean |
|
name(name) |
Yes | string |
|
label(label) |
Yes | string |
|
placeholder(placeholder) |
Yes | string |
|
required(required) |
Yes | boolean |
|
checked(checked) |
Yes | boolean |
|
autofocus(autofocus) |
Yes | boolean |
|
disabled(disabled) |
Yes | boolean |
|
searchable(searchable) |
Yes | boolean |
|
clearable(clearable) |
Yes | boolean |
|
loading(loading) |
Yes | boolean |
|
value |
Yes | number | string | any[] | any |
|
renderLabel |
Yes | (e: SelectOption) => string | TemplateResult |
|
rules |
Yes | FormItemRule[] |
|
rows(rows) |
Yes | number |
|
step(step) |
Yes | number |
|
min(min) |
Yes | number |
|
max(max) |
Yes | number |
|
dataList |
Yes | DataList | PickerOption[] | SelectOption[] |
@deprecated |
options |
Yes | DataList | PickerOption[] | SelectOption[] |
|
adder |
Yes | Adder |
|
itemchange |
Emitter<{ name: string; value: number | string | any[] | any }> |
||
search |
Emitter<string> |
||
get data |
any |
Instance Methods
| Method | Type |
|---|---|
focus |
() => void |
clearInvalidMessage |
() => void |
valid |
() => Promise<boolean> |
Other
| Type | Value |
|---|---|
| Event | itemchange, search |
| Part | label, tip, input, add |
| CSS State | invalid |