Forms and form validation

Page 1

Checkboxes If you bind a checkbox to a model, the model will be true if the checkbox is checked, false if it's not.

- You can set a specific value for the true / false values with

ng-true-value="melons" ng-false-value="noMelons"

Radio buttons Just assign the same model to all the radio buttons in the group and use the value attribute as normal.

input type="radio" ng-model="myForm.whichNewsletter" value="weeklyNews">

input type="radio" ng-model="myForm.whichNewsletter" value="monthlyNews"

Select boxes Just do as normal:

select ng-model='myForm.car'

option value='nissan'

You can also use ng-options to create dynamic selects which are tied to the scope.

Form Validation Set min and max lengths: input type="text" id="name" ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"

*Required*

Just use HTML5 - put required in the form and Angular will pick it up automatically

If the input type is set to email, Angular will automatically validate it.

Form and control states Use 'novalidate' on the form element to prevent HTML5 validation rules and use your own.

$pristine, $dirty, $valid, $invalid - can be applied to individual controls or the whole form.

Use ng-disabled to disable the submit button until the form is valid.