diff options
Diffstat (limited to 'docs/cookbook.formadvanced.ngdoc')
| -rw-r--r-- | docs/cookbook.formadvanced.ngdoc | 39 |
1 files changed, 29 insertions, 10 deletions
diff --git a/docs/cookbook.formadvanced.ngdoc b/docs/cookbook.formadvanced.ngdoc index 478358db..e3242bdc 100644 --- a/docs/cookbook.formadvanced.ngdoc +++ b/docs/cookbook.formadvanced.ngdoc @@ -3,12 +3,15 @@ @name Cookbook: Advanced Form @description -Here we extend the basic form example to include common features such as reverting, dirty state detection, and preventing invalid form submission. +Here we extend the basic form example to include common features such as reverting, dirty state +detection, and preventing invalid form submission. <doc:example> <doc:source> <script> function UserForm(){ + this.state = /^\w\w$/; + this.zip = /^\d\d\d\d\d$/; this.master = { name: 'John Smith', address:{ @@ -32,7 +35,6 @@ Here we extend the basic form example to include common features such as reverti save: function(){ this.master = this.form; this.cancel(); - alert('SAVED: ' + angular.toJson(this.master)); } }; </script> @@ -44,8 +46,8 @@ Here we extend the basic form example to include common features such as reverti <label>Address:</label><br/> <input type="text" name="form.address.line1" size="33" ng:required/> <br/> <input type="text" name="form.address.city" size="12" ng:required/>, - <input type="text" name="form.address.state" size="2" ng:required ng:validate="regexp:/^\w\w$/"/> - <input type="text" name="form.address.zip" size="5" ng:required ng:validate="regexp:/^\d\d\d\d\d$/"/><br/><br/> + <input type="text" name="form.address.state" size="2" ng:required ng:validate="regexp:state"/> + <input type="text" name="form.address.zip" size="5" ng:required ng:validate="regexp:zip"/><br/><br/> <label>Phone:</label> [ <a href="" ng:click="form.contacts.$add()">add</a> ] @@ -69,14 +71,31 @@ Here we extend the basic form example to include common features such as reverti </div> </doc:source> <doc:scenario> + it('should enable save button', function(){ + expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy(); + input('form.name').enter('change'); + expect(element(':button:contains(Save)').attr('disabled')).toBeFalsy(); + element(':button:contains(Save)').click(); + expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy(); + }); + it('should enable cancel button', function(){ + expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy(); + input('form.name').enter('change'); + expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy(); + element(':button:contains(Cancel)').click(); + expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy(); + expect(element(':input[name=form.name]').val()).toEqual('John Smith'); + }); </doc:scenario> </doc:example> -Things to notice +#Things to notice -Cancel & save buttons are only enabled if the form is dirty -- there is something to cancel or save. -Save button is only enabled if there are no validation errors on the form. -Cancel reverts the form changes back to original state. -Save updates the internal model of the form. -Debug view shows the two models. One presented to the user form and the other being the pristine copy master. +* Cancel & save buttons are only enabled if the form is dirty -- there is something to cancel or + save. +* Save button is only enabled if there are no validation errors on the form. +* Cancel reverts the form changes back to original state. +* Save updates the internal model of the form. +* Debug view shows the two models. One presented to the user form and the other being the pristine + copy master. |