Fixing the label for inputs when we received an invalid value

vuematerial · Aug 10, 2019 · e4eb0e5 · e4eb0e5
1 parent ff6d041
commit e4eb0e5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
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
     },