paper-input: Exposed invalid status via onInvalid action.

addon/components/paper-input.js

@@ -27,6 +27,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   tabindex: null,
   hideAllMessages: false,
   isTouched: false,
+  lastIsInvalid: undefined,
 
   hasValue: computed('value', 'isNativeInvalid', function() {
     let value = this.get('value');
@@ -38,8 +39,21 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
     return `input-${this.get('elementId')}`;
   }),
 
+  /**
+   * The result of isInvalid is appropriate for controlling the display of
+   * validation error messages. It also may be used to distinguish whether
+   * the input would be considered valid after it is touched.
+   *
+   * @public
+   *
+   * @return {boolean|null} Whether the input is or would be invalid.
+   *    null: input has not yet been touched, but would be invalid if it were
+   *    false: input is valid (touched or not)
+   *    true: input has been touched and is invalid.
+   */
   isInvalid: computed('isTouched', 'validationErrorMessages.length', 'isNativeInvalid', function() {
-    return this.get('isTouched') && (this.get('validationErrorMessages.length') || this.get('isNativeInvalid'));
+    let isInvalid = this.get('validationErrorMessages.length') || this.get('isNativeInvalid');
+    return isInvalid && !this.get('isTouched') ? null : !!isInvalid;
   }),
 
   renderCharCount: computed('value', function() {
@@ -120,6 +134,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   didReceiveAttrs() {
     this._super(...arguments);
     assert('{{paper-input}} and {{paper-select}} require an `onChange` action.', !!this.get('onChange'));
+    this.notifyInvalid();
   },
 
   didInsertElement() {
@@ -179,17 +194,27 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
     return offsetHeight + (line > 0 ? line : 0);
   },
 
+  notifyInvalid() {
+    let isInvalid = this.get('isInvalid');
+    if (this.get('lastIsInvalid') !== isInvalid) {
+      this.sendAction('onInvalid', this.get('isInvalid'));
+      this.set('lastIsinvalid');
+    }
+  },
+
   actions: {
     handleInput(e) {
       this.sendAction('onChange', e.target.value);
       this.growTextarea();
       let inputElement = this.$('input').get(0);
       this.set('isNativeInvalid', inputElement && inputElement.validity && inputElement.validity.badInput);
+      this.notifyInvalid();
     },
 
     handleBlur(e) {
       this.sendAction('onBlur', e);
       this.set('isTouched', true);
+      this.notifyInvalid();
     }
   }
 });