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

feat(form-core): provide _onValidatorUpdated with validator reference

Browse source 
Co-authored-by: Thijs Louisse<Thijs.Louisse@ing.com>
This commit is contained in:
Onkar 2022-03-31 20:07:14 +05:30 committed by Thijs Louisse
parent 66531e3c93
commit f408f6f8eb
3 changed files with 37 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/red-oranges-nail.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/form-core': minor
---
Updated the ValidateMixin \_\_setupValidators method to sync the calendar date with validator params with reference to this issue : https://github.com/ing-bank/lion/pull/1641/files#diff-bed9319548b16e509dd4a5c3d9c7c31175b577f91e433ee55a945e05339d2796R632

20
packages/form-core/src/validate/ValidateMixin.js
View file

@ -252,8 +252,8 @@ export const ValidateMixinImplementation = superclass =>
*/ */
this.__childModelValueChanged = false; this.__childModelValueChanged = false;
/** @private */ /** @protected */
this.__onValidatorUpdated = this.__onValidatorUpdated.bind(this); this._onValidatorUpdated = this._onValidatorUpdated.bind(this);
/** @protected */ /** @protected */
this._updateFeedbackComponent = this._updateFeedbackComponent.bind(this); this._updateFeedbackComponent = this._updateFeedbackComponent.bind(this);
} }
@ -580,9 +580,9 @@ export const ValidateMixinImplementation = superclass =>
/** /**
* @param {Event|CustomEvent} e * @param {Event|CustomEvent} e
* @private * @protected
*/ */
__onValidatorUpdated(e) { _onValidatorUpdated(e) {
if (e.type === 'param-changed' || e.type === 'config-changed') { if (e.type === 'param-changed' || e.type === 'config-changed') {
this.validate(); this.validate();
} }
@ -597,7 +597,7 @@ export const ValidateMixinImplementation = superclass =>
this.__prevValidators.forEach(v => { this.__prevValidators.forEach(v => {
events.forEach(e => { events.forEach(e => {
if (v.removeEventListener) { if (v.removeEventListener) {
v.removeEventListener(e, this.__onValidatorUpdated); v.removeEventListener(e, this._onValidatorUpdated);
} }
}); });
v.onFormControlDisconnect(this); v.onFormControlDisconnect(this);
@ -621,9 +621,15 @@ export const ValidateMixinImplementation = superclass =>
console.error(errorMessage, this); console.error(errorMessage, this);
throw new Error(errorMessage); throw new Error(errorMessage);
} }
events.forEach(e => { /** Updated the code to fix issue #1607 to sync the calendar date with validators params
* Here _onValidatorUpdated is responsible for responding to the event
*/
events.forEach(eventName => {
if (v.addEventListener) { if (v.addEventListener) {
v.addEventListener(e, this.__onValidatorUpdated); v.addEventListener(eventName, e => {
// @ts-ignore for making validator param dynamic
this._onValidatorUpdated(e, { validator: v });
});
} }
}); });
v.onFormControlConnect(this); v.onFormControlConnect(this);

19
packages/form-core/test-suites/ValidateMixin.suite.js
View file

@ -173,6 +173,25 @@ export function runValidateMixinSuite(customConfig) {
expect(validateSpy.callCount).to.equal(1); expect(validateSpy.callCount).to.equal(1);
}); });
it('revalidates when validator "param-changed"', async () => {
const validator = new MinLength(3);
const el = /** @type {ValidateElement} */ (
await fixture(html`
<${tag}
.validators=${[validator]}
.modelValue=${'myValue'}
>${lightDom}</${tag}>
`)
);
const validateSpy = sinon.spy(el, 'validate');
expect(validateSpy.callCount).to.equal(0);
validator.param = 4;
expect(validateSpy.callCount).to.equal(1);
});
it('clears current results when ".modelValue" changes', async () => { it('clears current results when ".modelValue" changes', async () => {
const el = /** @type {ValidateElement} */ ( const el = /** @type {ValidateElement} */ (
await fixture(html` await fixture(html`