Reset/Clear form

app/components/validated-input.js

@@ -41,6 +41,19 @@ export default Ember.Component.extend({
     run.debounce(this, this.setValue, 500, false);
   }),
 
+  /**
+   * When we reset the form, we manually set `value` so we have to make sure to propogate that change
+   * to the input field
+   */
+  syncRawInputValue: observer('value', function() {
+    let value = this.get('value');
+    let rawInputValue = this.get('rawInputValue');
+
+    if(value !== rawInputValue) {
+      this.set('rawInputValue', value);
+    }
+  }),
+
   showMessage: computed('attributeValidation.isDirty', 'isInvalid', 'didValidate', function() {
     return (this.get('attributeValidation.isDirty') || this.get('didValidate')) && this.get('isInvalid');
   }),

app/controllers/index.js

@@ -5,6 +5,10 @@
 
 import Ember from 'ember';
 
+const {
+  get
+} = Ember;
+
 export default Ember.Controller.extend({
   showAlert: false,
   isRegistered: false,
@@ -38,6 +42,20 @@ export default Ember.Controller.extend({
 
       dismissAlert() {
         this.set('showAlert', false);
+      },
+
+      reset() {
+        let model = this.get('model');
+        let details = model.get('details');
+        get(model.constructor, 'attributes').forEach((value, attr) => {
+          model.set(attr, null);
+        });
+        get(details.constructor, 'attributes').forEach((value, attr) => {
+          details.set(attr, null);
+        });
+        model.set('emailConfirmation', null); // Dummy attribute used to confirm the email address so it's not defined in the constructor
+        this.set('didValidate', false);
+        this.send('dismissAlert');
       }
   }
 });

app/templates/index.hbs

@@ -44,6 +44,7 @@
                   On submit, a manual validation is run which will validate both the <strong>User</strong> and  <strong>User Details</strong> models. If both are valid, then the user can continue to the next screen.
               </div>
               <button id="signup" {{action 'submit'}}>Sign Up</button>
+              <button id="reset" style="background: #A0A0A0" {{action 'reset'}}>Reset</button>
             </div>
         </form>
       </div>