angular.widget.form

Description

Angular widget that creates a form scope using the $formFactory API. The resulting form scope instance is attached to the DOM element using the jQuery .data() method under the $form key. See forms on detailed discussion of forms and widgets.

Alias: ng:form

In angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However browsers do not allow nesting of <form> elements, for this reason angular provides <ng:form> alias which behaves identical to <form> but allows element nesting.

Submitting a form and preventing default action

Since the role of forms in client-side Angular applications is different than in old-school roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in application specific way.

For this reason, Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified.

You can use one of the following two ways to specify what javascript method should be called when a form is submitted:

To prevent double execution of the handler, use only one of ng:submit or ng:click. This is because of the following form submission rules coming from the html spec:

Usage

In HTML Template Binding

<form
       [name="..."]></form>

Parameters

Example

 <script>
   function Ctrl() {
     this.text = 'guest';
   }
 </script>
 <div ng:controller="Ctrl">
   <form name="myForm">
     text: <input type="text" name="input" ng:model="text" required>
     <span class="error" ng:show="myForm.text.$error.REQUIRED">Required!</span>
   </form>
   <tt>text = {{text}}</tt><br/>
   <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
   <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
   <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
   <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/>
 </div>
  it('should initialize to model', function() {
   expect(binding('text')).toEqual('guest');
   expect(binding('myForm.input.$valid')).toEqual('true');
  });

  it('should be invalid if empty', function() {
   input('text').enter('');
   expect(binding('text')).toEqual('');
   expect(binding('myForm.input.$valid')).toEqual('false');
  });