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

fix(form-core): on reset the submitted values becomes false (#753)

Browse source
This commit is contained in:
Ben Amor Aymen 2020-06-09 16:38:28 +02:00 committed by GitHub
parent 7573ecf53e
commit d86cfc5901
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 250 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/form-core/src/InteractionStateMixin.js
View file

@ -141,6 +141,7 @@ export const InteractionStateMixin = dedupeMixin(
*/
resetInteractionState() {
this.touched = false;
this.submitted = false;
this.dirty = false;
this.prefilled = !this._isEmpty();
}

4
packages/form-core/test-suites/InteractionStateMixin.suite.js
View file

@ -168,19 +168,23 @@ export function runInteractionStateMixinSuite(customConfig) {
el.dirty = true;
el.touched = true;
el.prefilled = true;
el.submitted = true;
el.resetInteractionState();
expect(el.dirty).to.be.false;
expect(el.touched).to.be.false;
expect(el.prefilled).to.be.false;
expect(el.submitted).to.be.false;
el.dirty = true;
el.touched = true;
el.prefilled = false;
el.submitted = true;
el.modelValue = 'Some value';
el.resetInteractionState();
expect(el.dirty).to.be.false;
expect(el.touched).to.be.false;
expect(el.prefilled).to.be.true;
expect(el.submitted).to.be.false;
});
it('has a method initInteractionState()', async () => {

98
packages/form-integrations/docs/17-validation-examples.md
View file

@ -410,3 +410,101 @@ export const disabledInputsValidation = () => html`
></lion-input>
`;
```
### Form Validation Reset
```js preview-story
export const FormValidationReset = () => html`
<lion-form id="wideRightLayout" responsive>
<form>
<lion-input
name="first_name"
label="First Name"
.validators="${[new Required()]}"
></lion-input>
<lion-input name="last_name" label="Last Name" .validators="${[new Required()]}"></lion-input>
<lion-input-date
name="start-date"
label="Start date"
.modelValue="${new Date('2000-12-12')}"
.validators="${[new Required()]}"
></lion-input-date>
<lion-input-datepicker
name="end-date"
label="End date"
.modelValue="${new Date()}"
.validators="${[new Required()]}"
></lion-input-datepicker>
<lion-textarea
name="bio"
label="Biography"
.validators="${[new Required(), new MinLength(10)]}"
help-text="Please enter at least 10 characters"
></lion-textarea>
<lion-input-amount name="money" label="Money"></lion-input-amount>
<lion-input-iban name="iban" label="Iban"></lion-input-iban>
<lion-input-email name="email" label="Email"></lion-input-email>
<lion-checkbox-group
label="What do you like?"
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=${'baz'} label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
name="dinosaurs"
label="Favorite dinosaur"
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
</lion-radio-group>
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
<select slot="input">
<option value="1">Fire up that loud</option>
<option value="2">Another round of shots...</option>
<option value="3">Drop down for what?</option>
</select>
</lion-select>
<lion-input-range
name="range"
min="1"
max="5"
.modelValue="${2.3}"
unit="%"
step="0.1"
label="Input range"
></lion-input-range>
<lion-checkbox-group
name="terms[]"
.validators="${[
new Required(null, { getMessage: () => 'You are not allowed to read them' }),
]}"
>
<lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
</lion-checkbox-group>
<lion-switch
name="notifications"
label="Notifications"
help-text="Flip the switch to turn notifications on"
></lion-switch>
<lion-textarea name="comments" label="Comments"></lion-textarea>
<div class="buttons">
<lion-button raised>Submit</lion-button>
<lion-button
type="button"
raised
@click=${ev => {
console.log(ev.currentTarget.parentElement.parentElement.parentElement);
ev.currentTarget.parentElement.parentElement.parentElement.resetGroup();
}}
>Reset</lion-button
>
</div>
</form>
</lion-form>
`;
```

147
packages/form-integrations/test/form-reset.test.js Normal file
View file

@ -0,0 +1,147 @@
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
import '@lion/input-amount/lion-input-amount';
import '@lion/input-date/lion-input-date';
import '@lion/textarea/lion-textarea';
import '@lion/input-datepicker/lion-input-datepicker';
import '@lion/input-email/lion-input-email';
import '@lion/input-iban/lion-input-iban';
import '@lion/input-range/lion-input-range';
import '@lion/input/lion-input';
import '@lion/checkbox-group/lion-checkbox-group';
import '@lion/checkbox-group/lion-checkbox';
import '@lion/radio-group/lion-radio-group';
import '@lion/radio-group/lion-radio';
import '@lion/select/lion-select';
import '@lion/switch/lion-switch';
import '@lion/form/lion-form';
import '@lion/button/lion-button';
import { Required, MinLength } from '@lion/form-core';
describe(`Submitting/Resetting Form`, async () => {
let el;
beforeEach(async () => {
el = await fixture(html`
<lion-form id="form_test" responsive>
<form>
<lion-input
name="first_name"
label="First Name"
.validators="${[new Required()]}"
></lion-input>
<lion-input
name="last_name"
label="Last Name"
.validators="${[new Required()]}"
></lion-input>
<lion-input-date
name="start-date"
label="Start date"
.validators="${[new Required()]}"
></lion-input-date>
<lion-input-datepicker
name="end-date"
label="End date"
.validators="${[new Required()]}"
></lion-input-datepicker>
<lion-textarea
name="bio"
label="Biography"
.validators="${[new Required(), new MinLength(10)]}"
help-text="Please enter at least 10 characters"
></lion-textarea>
<lion-input-amount
.validators="${[new Required()]}"
name="money"
label="Money"
></lion-input-amount>
<lion-input-iban
.validators="${[new Required()]}"
name="iban"
label="Iban"
></lion-input-iban>
<lion-input-email
.validators="${[new Required()]}"
name="email"
label="Email"
></lion-input-email>
<lion-checkbox-group
label="What do you like?"
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=${'baz'} label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
name="dinosaurs"
label="Favorite dinosaur"
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
</lion-radio-group>
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
<select slot="input">
<option value="1">Fire up that loud</option>
<option value="2">Another round of shots...</option>
<option value="3">Drop down for what?</option>
</select>
</lion-select>
<lion-input-range
.validators="${[new Required()]}"
name="range"
min="1"
max="5"
unit="%"
step="0.1"
label="Input range"
></lion-input-range>
<lion-checkbox-group
name="terms[]"
.validators="${[
new Required(null, { getMessage: () => 'You are not allowed to read them' }),
]}"
>
<lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
</lion-checkbox-group>
<lion-textarea
.validators="${[new Required()]}"
name="comments"
label="Comments"
></lion-textarea>
<div class="buttons">
<lion-button id="submit_button" type="submit" raised>Submit</lion-button>
<lion-button id="reset_button" type="reset" raised>
Reset
</lion-button>
</div>
</form>
</lion-form>
`);
});
it('Submitting a form should make submitted true for all fields', async () => {
el.querySelector('#submit_button').click();
await elementUpdated(el);
el.formElements.forEach(field => {
console.log(field);
console.log(field.submitted);
expect(field.submitted).to.be.true;
});
});
it('Resetting a form should reset metadata of all fields', async () => {
el.querySelector('#submit_button').click();
el.querySelector('#reset_button').click();
await elementUpdated(el);
expect(el.submitted).to.be.false;
el.formElements.forEach(field => {
expect(field.submitted).to.be.false;
expect(field.touched).to.be.false;
expect(field.dirty).to.be.false;
});
});
});

25
yarn.lock
View file

@ -1998,31 +1998,6 @@
npmlog "^4.1.2"
write-file-atomic "^2.3.0"
"@lion/field@0.13.1":
version "0.13.1"
resolved "https://registry.yarnpkg.com/@lion/field/-/field-0.13.1.tgz#566244c16fbac8e46d59e5a2eca7024cc6c8bfdc"
integrity sha512-ecAzZt4qq4VA+BCrxS9wcE5Vzy3yK6ETdHQlnmIZKuJwaACbtx+FKTkDovwxkYy4jpohWB2g+etQevz4F6GOzw==
dependencies:
"@lion/core" "0.6.0"
"@lion/validate" "0.11.0"
"@lion/localize@0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.10.0.tgz#f3608baeb9ae65ac4e0c3efdd6208208220a6153"
integrity sha512-oAy07yvNkFlsMxW3TBwrHvj1QEcjVDJ50vazuekzpc0M6v9c+00/6Y3U3TnH/H5V5qjKmOHnfhqYZoVqkmaqhA==
dependencies:
"@bundled-es-modules/message-format" "6.0.4"
"@lion/core" "0.6.0"
singleton-manager "1.0.0"
"@lion/validate@0.11.0":
version "0.11.0"
resolved "https://registry.yarnpkg.com/@lion/validate/-/validate-0.11.0.tgz#634465b2a90461024e913698f60505cd0b774a19"
integrity sha512-pphmYoWZZyybjLo0kdZ8jBSDwS2yh4Kjuanu6Qv8YJCK1gK1d7CvMIqBdFAPlRvZ5DSpz7eoHMrY/iYbo6edog==
dependencies:
"@lion/core" "0.6.0"
"@lion/localize" "0.10.0"
"@marionebl/sander@^0.6.0":
version "0.6.1"
resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"