ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: improve custom Field tutorial

Browse source
This commit is contained in:
Thijs Louisse 2022-03-16 12:23:53 +01:00
parent c34aef82a2
commit 9434a2fae7
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
docs/guides/how-to/create-a-custom-field.md
View file

@ -141,6 +141,12 @@ Then we follow the steps below:
the glue to integrate all other functionality like parsing/formatting/serializing, validating, the glue to integrate all other functionality like parsing/formatting/serializing, validating,
tracking interaction states etc. tracking interaction states etc.
> N.B. Make sure you never override other property getters than the one mentioned in this tutorial,
> because those properties will loose their reactivity (they won't be considered anymore in the
> update loop of LitElement).
> Whenever a .modelValue/.formattedValue/.serializedValue needs to be computed, use
> [parser/formatter/serializer](../../docs/systems/form/formatting-and-parsing.md)
Implement with the following code: Implement with the following code:
```js preview-story ```js preview-story
@ -165,6 +171,7 @@ export const createAField = () => {
} }
get value() { get value() {
// Remember we should always return type 'string' here
return this._inputNode.value; return this._inputNode.value;
} }
@ -183,6 +190,9 @@ export const createAField = () => {
``` ```
That was all! That was all!
Now that your .modelValue is connected your component is fully compatible with our form system
> Is your `.modelValue` still undefined? Please make sure you're `.value` is of type 'string'.
Now you can enhance your slider by writing custom Validators for it or by Now you can enhance your slider by writing custom Validators for it or by
writing a parser to get a custom modelValue type. writing a parser to get a custom modelValue type.