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.

Usage

In HTML Template Binding

<form></form>

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');
  });