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.
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.
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:
ng:submit
)ng:click
) and a submit handler on the enclosing form (ng:submit
)<form [name="..."]></form>
name(optional) – {string=} –
Name of the form.
<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'); });