Fixing the label for inputs when we received an invalid value

Topinaqui · Topinaqui · commit e4eb0e52169d · 2019-08-10T09:34:19.000-03:00
diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
@@ -60,7 +60,8 @@
         password: null,
         togglePassword: false,
         clear: false,
-        file: false
+        file: false,
+        hasInvalidValue: false
       }
     }),
     provide () {
@@ -79,7 +80,7 @@
         return this.mdTogglePassword && this.MdField.password
       },
       hasValue () {
-        return this.stringValue && this.stringValue.length > 0
+        return (this.stringValue && this.stringValue.length > 0) || this.MdField.hasInvalidValue 
       },
       valueLength () {
         if (this.stringValue) {
diff --git a/src/components/MdField/MdFieldMixin.js b/src/components/MdField/MdFieldMixin.js
@@ -24,6 +24,7 @@ export default {
         if (value.constructor.toString().match(/function (\w*)/)[1].toLowerCase() !== 'inputevent') {
           this.$nextTick(() => {
             this.localValue = value
+            this.MdField.hasInvalidValue = this.isInvalidValue();
           })
         }
       }
@@ -95,6 +96,9 @@ export default {
         }
       }
     },
+    isInvalidValue () {
+      return this.$el.validity.badInput
+    },
     setFieldValue () {
       this.MdField.value = this.model
     },

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ export default {`
`24`	`24`	`if (value.constructor.toString().match(/function (\w*)/)[1].toLowerCase() !== 'inputevent') {`
`25`	`25`	`this.$nextTick(() => {`
`26`	`26`	`this.localValue = value`
	`27`	`+ this.MdField.hasInvalidValue = this.isInvalidValue();`
`27`	`28`	`})`
`28`	`29`	`}`
`29`	`30`	`}`
`@@ -95,6 +96,9 @@ export default {`
`95`	`96`	`}`
`96`	`97`	`}`
`97`	`98`	`},`
	`99`	`+ isInvalidValue () {`
	`100`	`+ return this.$el.validity.badInput`
	`101`	`+ },`
`98`	`102`	`setFieldValue () {`
`99`	`103`	`this.MdField.value = this.model`
`100`	`104`	`},`