Week Five: Forms and Validation

۹۶/۰۱/۰۶
۰ دیدگاه
پردیس

Forms

Building Forms

Take this code in HTML:

<form ng-controller='formController'>
    <input type='text' name='First' ng-model='formValues.first'>First Name</input>
    <input type='text' name='Last' ng-model='formValues.last'>Last Name</input>
    <input type='text' name='Email' ng-model='formValues.email'>Email</input>
    <select name='Gender' ng-model='formValues.gender'>
        <option value='Male'>Male</option>
        <option value='Female'>Female</option>
    </select>
</form>

This can be handled like this:

var myApp = angular.module('myApp', [])
myApp.controller('formController', function($scope){
    $scope.formValues = {}
})

Submitting a Form

You will need ng-submit:

<form ng-controller='formController'>
    <input type='text' name='First' ng-model='formValues.first'>First Name</input>
    <input type='text' name='Last' ng-model='formValues.last'>Last Name</input>
    <input type='text' name='Email' ng-model='formValues.email'>Email</input>
    <select name='Gender' ng-model='formValues.gender'>
        <option value='Male'>Male</option>
        <option value='Female'>Female</option>
    </select>
    <button type='submit' ng-submit='submit()'>Submit</button>
</form>

And, if we were posting this data to a server, we would use the $http to pass the value that received the input data:

var myApp = angular.module('myApp', [])
myApp.controller('formController', function($scope){
    $scope.formValues = {}
    $scope.submit = function(){
        $http.post('/someApi', formValues).then(function(response){
            console.log(response)
        })
    }
})

Front-end Form Validation

There are 4 basic types of validation:

1. Required: whether the user has entered data -> HTML5 attribute required

2. Type Validation: validation against a pattern -> HTML5 type='email' or type='number'

3. Length Validation: has entered enough characters

4. Pattern Validation: the most advanced. checks against a regular expression

Angular Validation

Angular monitors the state of form and input fields (input, textarea, select), and notifies you about the current state.

States that can be applied to input fields, and are either true or false:

* $untouched: The field has not been touched yet.

* $touched: The field has been touched.

* $pristine: The field has not been modified yet.

* $dirty: The field has been modified.

* $invalid: The field content is not valid.

* $valid: The field content is valid.

States that can be applied to entire forms:

* $pristine: No fields have been modified yet.

* $dirty: One or more have been modified.

* $invalid: The form content is not valid.

* $valid: The form content is valid.

* $submitted - The form is submitted.

CSS classes that get applied by Angular for input fields:

* ng-untouched: The field has not been touched yet.

* ng-touched: The field has been touched.

* ng-pristine: The field has not been modified yet.

* ng-dirty: The field has been modified.

* ng-valid: The field content is valid.

* ng-invalid: The field content is not valid.

* ng-valid-key: One key for each validation. For example: ng-valid-required; this is useful when there is more than one thing that must be validated.

* ng-invalid-key: For example: ng-invalid-required

CSS classes that get applied by Angular for entire forms:

* ng-pristine: No fields have been modified yet.

* ng-dirty: One or more fields have been modified.

* ng-valid: The form content is valid.

* ng-invalid: The form content is not valid.

* ng-valid-key: One key for each validation. For example: ng-valid-required; this is useful when there is more than one thing that must be validated.

* ng-invalid-key: Example: ng-invalid-required

Example

<form name='thisForm'>
    <input name="thisName" ng-model="thisName" required ng-pattern='/^([^0-9]*)$/'>
    <span ng-show="thisForm.thisName.$touched && thisForm.thisName.$invalid">
        Oops! This field is required.
    </span>
    <input type='email' name='thisEmail' required>
    <span ng-show="thisForm.thisEmail.$touched && thisForm.thisEmail.$invalid">
        Oops! Please enter a valid email address.
    </span>
    <button type='submit' ng-disabled='thisForm.thisName.$invalid' ng-submit='submit()'>
        Submit
    </button>
</form>