Angularjs forms detailed and simple example _angularjs

Controls (input, select, textarea) are a way for users to enter data. form (form) is a collection of these controls in order to group related controls.

Forms and controls provide validation services, so users can receive prompts for invalid input. This provides a better user experience because the user can immediately get feedback and know how to fix the error. Keep in mind that while client-side validation plays an important role in providing a good user experience, it can be easily bypassed, so client-side validation is not trustworthy. Server-side validation is still necessary for a secure application.

First, simple form

The key directive to understanding two-way data binding is Ngmodel. Ngmodel provides bidirectional data binding from model to view and view to model. Also, it provides APIs to other directive to enhance their behavior.

<! DOCTYPE html> 

Two, Using CSS classes

To make the form and the controls and Ngmodel rich style, you can add the following class:

1. Ng-valid
2. Ng-invalid
3. Ng-pristine (never entered)
4. Ng-dirty (entered)
   

The following example uses CSS to show the validity of each form control. In the example, both User.Name and user.email are required, but when they are modified (dirty), the background will appear red. This ensures that the user does not interact with the form until after it is submitted? , finding that failure to meet its effectiveness is a distraction from a mistake.

<! DOCTYPE html> 

Third, Binding to form and control state

In angular, a form is an instance of Formcontroller. Form instances can be randomly exposed to scope by using the Name property (not seen here, there is no property in scope that follows the name attribute of form, but it can be acquired because of the "document. Table Single-name" method). Similarly, a control is an instance of a ngmodelcontroller. Control instances can be exposed to the form in a similar way using the Name property. This means that the internal properties of both form and control (controls) are feasible for this practice of binding in a view using a standard bound entity (standard binding primitives).

This allows us to extend the above example with the following features:

1. The reset button is only available after the form has changed.
2. The Save button is available only if the form has changed and the input is valid.
3. Custom error messages for User.email and User.agree.
   

<! DOCTYPE html> 

Four, Custom Validation

Angular provides implementations for most common HTML table fields (Input,text,number,url,email,radio,checkbox) types, as well as some directive for form validation (Required,pattern ,, Inlength,maxlength,min,max).

You can add custom validation functions by definition to Ngmodel controller (is this the ngmodelcontroller that is connected together?) directive to define our own validation plug-ins. To get a controller,directive, as in the following example, a dependency is specified (directive defines the Require attribute in the object).

Model to view update-whenever the model changes, all the function in the Ngmodelcontroller. $formatters (triggering data validation and formatting conversions when model changes) will be queued for execution, So every function here has the opportunity to format the value of model and pass the Ngmodelcontroller. $setValidity (http://code.angularjs.org/1.0.2/docs/api/ ng.directive:ngmodel.ngmodelcontroller# $setValidity) To modify the validation status of the control.

View to model update-a similar way, whenever a user interacts with a control, triggers the Ngmodelcontroller. $setViewValue. This is the turn of the execution ngmodelcontroller$parsers (when the control obtains a value from the DOM, it executes all the methods in the array, examines the values for filtering or converting, and verifies) all the methods in the array.

In the following example, we will create two directive.

The first is integer, which is responsible for verifying that the input is actually a valid integer. For example, 1.23 is an illegal value because it contains a decimal part. Note that we replace the end insertion (push) by inserting the array header (Unshift), because we want it to execute first and use the value of the control (estimating that the array is used as a queue), and we need to perform the validation function before the conversion takes place.

The second directive is smart-float. He converts "1.2" and "1,2" to a valid floating-point number "1.2". Note that we cannot use the HTML5 input type "number" here because the browser does not allow the user to enter the illegal characters we expect, such as "1,2" (it only recognizes "1.2").

<! DOCTYPE html> 

V. Implementing custom Form control (using Ngmodel)

Angular implements all of the HTML's underlying controls (Input,select,textarea) and is capable of most scenarios. However, if we need to be more flexible, we can implement the purpose of customizing form controls by writing a directive.

To work with controls and Ngmodel, and to implement bidirectional data binding, it requires:

Implement the Render method, which is responsible for rendering the data after execution and through all Ngmodelcontroller. $formatters methods.

Call the $setviewvalue method, the model needs a response update whenever the user interacts with the control. This is usually implemented in a DOM event listener.
You can view $compileprovider.directive for more information.

The following example shows how to add a two-way data-binding attribute to an element that can be edited.

<! DOCTYPE html>