diff --git a/front/core/components/input-number/index.js b/front/core/components/input-number/index.js
index 7117ada9a..2e4e73c29 100644
--- a/front/core/components/input-number/index.js
+++ b/front/core/components/input-number/index.js
@@ -21,6 +21,8 @@ export default class InputNumber extends Input {
if (!isNaN(this.value))
this.input.value = this.value;
+ this.validateValue();
+
this.emit('change', {event});
});
@@ -42,8 +44,11 @@ export default class InputNumber extends Input {
* @param {Number} value - Value
*/
set value(value) {
+ if (!this.hasOwnProperty('_value') && value)
+ this.input.value = value;
+
this._value = value;
- this.hasValue = this._value !== null;
+ this.hasValue = !(value === null || value === undefined || value === '');
if (this.hasValue)
this.element.classList.add('not-empty');
@@ -101,6 +106,10 @@ export default class InputNumber extends Input {
if (value) this.input.step = value;
}
+ get validationError() {
+ return this.input.validationMessage;
+ }
+
/**
* Increases the input value
*/
@@ -130,12 +139,42 @@ export default class InputNumber extends Input {
*/
validateValue() {
if (!this.hasValidValue()) {
- this.element.querySelector('.infix')
- .classList.add('invalid', 'validated');
- } else {
- this.element.querySelector('.infix')
- .classList.remove('invalid', 'validated');
- }
+ this.hideError();
+ this.showError();
+ } else
+ this.hideError();
+ }
+
+ /**
+ * Shows the input validation error
+ */
+ showError() {
+ const infixElement = this.element.querySelector('.infix');
+ const infixClassList = infixElement.classList;
+
+ const errorSpan = document.createElement('span');
+ errorSpan.className = 'mdl-textfield__error';
+
+ const errorText = document.createTextNode(this.validationError);
+
+ errorSpan.append(errorText);
+ infixElement.append(errorSpan);
+
+ infixClassList.add('validated', 'invalid');
+ }
+
+ /**
+ * Hides the input validation error
+ */
+ hideError() {
+ const infixElement = this.element.querySelector('.infix');
+ const infixClassList = infixElement.classList;
+ const errorElement = this.element.querySelector('.infix span.mdl-textfield__error');
+
+ if (errorElement)
+ errorElement.remove();
+
+ infixClassList.remove('validated', 'invalid');
}
}
diff --git a/front/core/components/input-number/index.spec.js b/front/core/components/input-number/index.spec.js
index 18d51512e..3da82fe21 100644
--- a/front/core/components/input-number/index.spec.js
+++ b/front/core/components/input-number/index.spec.js
@@ -50,7 +50,7 @@ describe('Component vnInputNumber', () => {
controller.validateValue();
let classes = controller.element.querySelector('.infix').classList.toString();
- expect(classes).not.toContain('invalid validated');
+ expect(classes).not.toContain('validated invalid');
});
it(`should call hasValidValue() and add the class invalid and validated`, () => {
@@ -60,7 +60,7 @@ describe('Component vnInputNumber', () => {
controller.validateValue();
let classes = controller.element.querySelector('.infix').classList.toString();
- expect(classes).toContain('invalid validated');
+ expect(classes).toContain('validated invalid');
});
});
});
diff --git a/modules/agency/front/basic-data/index.html b/modules/agency/front/basic-data/index.html
index ac37e8c07..f0ee393d1 100644
--- a/modules/agency/front/basic-data/index.html
+++ b/modules/agency/front/basic-data/index.html
@@ -32,30 +32,26 @@
-
+ model="$ctrl.zone.travelingDays"
+ min="0" step="1">
+ model="$ctrl.zone.hour">
+ model="$ctrl.zone.price"
+ min="0" step="0.01">
+ model="$ctrl.zone.bonus"
+ min="0" step="0.01">