یک پردیس

۶ مطلب با کلمه‌ی کلیدی «AngularJS» ثبت شده است

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>

Week Five Sample Code


Week One Week Two Week Three Week Four Week Five

Promises

In order to properly use asynchronous operations in your Angular code, use promises. Prior to introduction of promises, people used callback functions.

* Promises are provided by $q service.

* Instantiating a promise is basically telling JS to "wait for this to finish".

* You wrap logic inside the promise, with calls to resolve() instead of return.

* Where your normal function would return a final value, the async method returns a promise of having the value in the future.

* As promise.then() and promise.catch() return promises, they can be chained in an operation called composition. Composition refers to the execution of several async calls in parallel and getting the result, once all the promises have been resolved.

Promise States

* Pending: an initial state, not fulfilled or rejected

* Fulfill