advancedform.html

<h1>Cookbook: Advanced Form</h1>
<div class="cookbook-advanced-form"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<p>Here we extend the basic form example to include common features such as reverting, dirty state
detection, and preventing invalid form submission.</p><doc:example>
<pre class="doc-source">
   &lt;script&gt;
   UserForm.$inject = ['$invalidWidgets'];
   function UserForm($invalidWidgets){
     this.$invalidWidgets = $invalidWidgets;
     this.state = /^\w\w$/;
     this.zip = /^\d\d\d\d\d$/;
     this.master = {
       name: 'John Smith',
       address:{
         line1: '123 Main St.',
         city:'Anytown',
         state:'AA',
         zip:'12345'
       },
       contacts:[
         {type:'phone', value:'1(234) 555-1212'}
       ]
     };
     this.cancel();
   }

   UserForm.prototype = {
     cancel: function(){
       this.form = angular.copy(this.master);
     },

     save: function(){
       this.master = this.form;
       this.cancel();
     }
   };
   &lt;/script&gt;
   &lt;div ng:controller="UserForm"&gt;

     &lt;label&gt;Name:&lt;/label&gt;&lt;br/&gt;
     &lt;input type="text" name="form.name" ng:required/&gt; &lt;br/&gt;&lt;br/&gt;

     &lt;label&gt;Address:&lt;/label&gt;&lt;br/&gt;
     &lt;input type="text" name="form.address.line1" size="33" ng:required/&gt; &lt;br/&gt;
     &lt;input type="text" name="form.address.city" size="12" ng:required/&gt;,
     &lt;input type="text" name="form.address.state" size="2" ng:required ng:validate="regexp:state"/&gt;
     &lt;input type="text" name="form.address.zip" size="5" ng:required
ng:validate="regexp:zip"/&gt;&lt;br/&gt;&lt;br/&gt;

     &lt;label&gt;Contacts:&lt;/label&gt;
     [ &lt;a href="" ng:click="form.contacts.$add()"&gt;add&lt;/a&gt; ]
     &lt;div ng:repeat="contact in form.contacts"&gt;
       &lt;select name="contact.type"&gt;
         &lt;option&gt;email&lt;/option&gt;
         &lt;option&gt;phone&lt;/option&gt;
         &lt;option&gt;pager&lt;/option&gt;
         &lt;option&gt;IM&lt;/option&gt;
       &lt;/select&gt;
       &lt;input type="text" name="contact.value" ng:required/&gt;
        [ &lt;a href="" ng:click="form.contacts.$remove(contact)"&gt;X&lt;/a&gt; ]
     &lt;/div&gt;
   &lt;button ng:click="cancel()" ng:disabled="{{master.$equals(form)}}"&gt;Cancel&lt;/button&gt;
   &lt;button ng:click="save()" ng:disabled="{{$invalidWidgets.visible() ||
master.$equals(form)}}"&gt;Save&lt;/button&gt;

   &lt;hr/&gt;
   Debug View:
   &lt;pre&gt;form={{form}}
   master={{master}}&lt;/pre&gt;
   &lt;/div&gt;
</pre>
<pre class="doc-scenario">
  it('should enable save button', function(){
    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
    input('form.name').enter('');
    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');
  });
</pre>
</doc:example><h2>Things to notice</h2>

<ul>
<li>Cancel &amp; save buttons are only enabled if the form is dirty — there is something to cancel or
save.</li>
<li>Save button is only enabled if there are no validation errors on the form.</li>
<li>Cancel reverts the form changes back to original state.</li>
<li>Save updates the internal model of the form.</li>
<li>Debug view shows the two models. One presented to the user form and the other being the pristine
copy master.</li>
</ul></div>