make onValidityChange send isValid, isTouched and isInvalidAndTouched

miguelcobain · Mar 6, 2017 · a03eccf · a03eccf
1 parent cda97bf
commit a03eccf
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/addon/components/paper-form.js b/addon/components/paper-form.js
@@ -26,6 +26,10 @@ export default Component.extend(ParentMixin, {
     return this.get('childComponents').isAny('isInvalid');
   }),
 
+  isTouched: computed('childComponents.@each.isTouched', function() {
+    return this.get('childComponents').isAny('isTouched');
+  }),
+
   submit() {
     this.send('onSubmit');
     return false;
@@ -34,7 +38,7 @@ export default Component.extend(ParentMixin, {
   actions: {
     onValidityChange() {
       if (this.get('lastIsValid') !== this.get('isValid')) {
-        this.sendAction('onValidityChange', this.get('isValid'));
+        this.sendAction('onValidityChange', this.get('isValid'), this.get('isTouched'), this.get('isInvalid') && this.get('isTouched'));
         this.set('lastIsValid', this.get('isValid'));
       }
     },

diff --git a/tests/integration/components/paper-form-test.js b/tests/integration/components/paper-form-test.js
@@ -64,10 +64,12 @@ test('form `onSubmit` action is invoked', function(assert) {
 test('form `onValidityChange` action is invoked', function(assert) {
   // paper-input triggers `onValidityChange` on render
   // so we expect two runs: one on render and another on validity change
-  assert.expect(2);
+  assert.expect(6);
 
-  this.set('onValidityChange', () => {
-    assert.ok(true);
+  this.set('onValidityChange', (isValid, isTouched, isInvalidAndTouched) => {
+    assert.ok(isValid);
+    assert.notOk(isTouched);
+    assert.notOk(isInvalidAndTouched);
   });
 
   this.render(hbs`
@@ -77,13 +79,22 @@ test('form `onValidityChange` action is invoked', function(assert) {
     {{/paper-form}}
   `);
 
+  this.set('onValidityChange', (isValid, isTouched, isInvalidAndTouched) => {
+    assert.notOk(isValid);
+    assert.ok(isTouched);
+    assert.ok(isInvalidAndTouched);
+  });
+
+  this.$('input:first').trigger('blur');
+
   this.set('errors', [{
     message: 'foo should be a number.',
     attribute: 'foo'
   }, {
     message: 'foo should be smaller than 12.',
     attribute: 'foo'
   }]);
+
 });
 
 test('form is reset after submit action is invoked', function(assert) {