AngularJS has more in-built features to Handle all the form events in efficient manner.

Libraries used in Demo:

• Bootstrap – enhance the HTML page view
• AngularJS library – to handle form events
• Route library – To redirect page and Data view

Form Tag ( Name: form_validation ) :

• novalidate – To eliminate all the Jquery validation except angular JS validation in form.
• form_validation.$valid && submit() – submit the form once all the data are validated

form contains three sections:

1. Success section: Display the custom message ,either the form validation has succeed or failed.

		

			

				×
				New Alert Created Successfully.
			
		

by setting style=”display:none;” we can avoid the simple form Message handler display.

2. Form Error Section: To list out the error message
3. HTML Form element: Basic HTML code with ng-model & ng-required angular attributes.

Form:

There are three inputs listed as below,

InputField      [Form_Field_Name] 
		   Email Address   [to_address],
		   Name            [username],
		   Frequency       [frequency]

Attributes:

1. ng-model=”to_address” – Define input value to to_address, and pass that value to the controller
2. ng-required=”true” – the input Field is mandatory
3. ng-show – To show the content of particular div if the condition is true.

Form Error Message:

• {{FORM_NAME}}.$submitted – Trigger the event once the form is submitted,
• {{FORM_NAME}}.{{FIELD_NAME}}.$touched – Focus on Input Field
• {{FORM_NAME}}.{{FIRLD_NAME}}.$error.required – Error notification for corresponding field

HTML: