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

fix(form-core): form should be able to access formattedValue of children

Browse source
This commit is contained in:
Thomas Allmer 2020-08-12 16:44:09 +02:00 committed by Thomas Allmer
parent dd021e4392
commit 07c598fd68
6 changed files with 45 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/fair-schools-rescue.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/form-core': patch
'@lion/form-integrations': patch
---
Form should be able to access formattedValue of children

2
package.json
View file

@ -9,7 +9,7 @@
"build:docs": "wca analyze \"packages/tabs/**/*.js\"",
"build:types": "tsc -p tsconfig.build.types.json",
"bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize",
"debug": "web-test-runner \"packages/form-core/test/**/*.test.js\" --watch",
"debug": "web-test-runner \"packages/form-integrations/test/**/*.test.js\" --watch",
"dev-server": "es-dev-server",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",

8
packages/form-core/src/choice-group/ChoiceGroupMixin.js
View file

@ -155,9 +155,13 @@ export const ChoiceGroupMixin = dedupeMixin(
* @override
*/
_getFromAllFormElements(property, filterCondition = () => true) {
// For modelValue and serializedValue, an exception should be made,
// For modelValue, serializedValue and formattedValue, an exception should be made,
// The reset can be requested from children
if (property === 'modelValue' || property === 'serializedValue') {
if (
property === 'modelValue' ||
property === 'serializedValue' ||
property === 'formattedValue'
) {
return this[property];
}
return this.formElements.filter(filterCondition).map(el => el.property);

19
packages/form-integrations/docs/15-features-overview.md
View file

@ -40,18 +40,9 @@ export const main = () => {
loadDefaultFeedbackMessages();
Required.getMessage = () => 'Please enter a value';
return html`
<lion-form
@model-value-changed="${ev => {
console.log('lion-form::', ev.target.name, ':', ev.detail.formPath);
}}"
>
<lion-form>
<form>
<lion-fieldset
name="full_name"
@model-value-changed="${ev => {
console.log('lion-fieldset::', ev.target.name, ':', ev.detail.formPath);
}}"
>
<lion-fieldset name="full_name">
<lion-input
name="first_name"
label="First Name"
@ -85,9 +76,6 @@ export const main = () => {
<lion-input-iban name="iban" label="Iban"></lion-input-iban>
<lion-input-email name="email" label="Email"></lion-input-email>
<lion-checkbox-group
@model-value-changed="${ev => {
console.log('lion-cb-group::', ev.target.name, ':', ev.detail.formPath);
}}"
label="What do you like?"
name="checkers"
.validators="${[new Required()]}"
@ -97,9 +85,6 @@ export const main = () => {
<lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
@model-value-changed="${ev => {
console.log('lion-radio-group::', ev.target.name, ':', ev.detail.formPath);
}}"
name="dinosaurs"
label="Favorite dinosaur"
.validators="${[new Required()]}"

28
packages/form-integrations/test/form-integrations.test.js
View file

@ -8,11 +8,35 @@ describe('Form Integrations', () => {
const formEl = el._lionFormNode;
expect(formEl.serializedValue).to.eql({
bio: '',
'checkers[]': [[]],
checkers: ['foo', 'bar'],
comments: '',
date: '2000-12-12',
datepicker: '2020-12-12',
dinosaurs: '',
dinosaurs: 'brontosaurus',
email: '',
favoriteColor: 'hotpink',
full_name: {
first_name: '',
last_name: '',
},
iban: '',
lyrics: '1',
money: '',
range: 2.3,
terms: [],
});
});
it('".formattedValue" returns all non disabled fields based on form structure', async () => {
const el = await fixture(html`<umbrella-form></umbrella-form>`);
const formEl = el._lionFormNode;
expect(formEl.formattedValue).to.eql({
bio: '',
checkers: ['foo', 'bar'],
comments: '',
date: '12/12/2000',
datepicker: '12/12/2020',
dinosaurs: 'brontosaurus',
email: '',
favoriteColor: 'hotpink',
full_name: {

8
packages/form-integrations/test/helpers/umbrella-form.js
View file

@ -64,11 +64,11 @@ export class UmbrellaForm extends LitElement {
<lion-input-email name="email" label="Email"></lion-input-email>
<lion-checkbox-group
label="What do you like?"
name="checkers[]"
name="checkers"
.validators="${[new Required()]}"
>
<lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
<lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue=${'bar'} checked label="I like bar"></lion-checkbox>
<lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
@ -77,7 +77,7 @@ export class UmbrellaForm extends LitElement {
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
</lion-radio-group>
<lion-select-rich name="favoriteColor" label="Favorite color">