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

.changeset/fair-schools-rescue.md

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

package.json

@@ -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",

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -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);

packages/form-integrations/docs/15-features-overview.md

@@ -40,18 +40,9 @@ export const main = () => {
   loadDefaultFeedbackMessages();
   Required.getMessage = () => 'Please enter a value';
   return html`
-    <lion-form
+    <lion-form>
-      @model-value-changed="${ev => {
-        console.log('lion-form::', ev.target.name, ':', ev.detail.formPath);
-      }}"
-    >
       <form>
-        <lion-fieldset
+        <lion-fieldset name="full_name">
-          name="full_name"
-          @model-value-changed="${ev => {
-            console.log('lion-fieldset::', ev.target.name, ':', ev.detail.formPath);
-          }}"
-        >
           <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()]}"

packages/form-integrations/test/form-integrations.test.js

@@ -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: {

packages/form-integrations/test/helpers/umbrella-form.js

@@ -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=${'foo'} checked label="I like foo"></lion-checkbox>
-            <lion-checkbox .choiceValue=${'bar'} label="I like bar"></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">