AngularJS Form Validation In Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Amruta
In this tutorial we will show you the solution of angularjs form validation in controller, using directives in angularjs we can validate our form elements and we can checks each and every elements is properly filled or not after that when user submitting form event then our validate result message will print on console.
Here we validating our form in controller using ‘$valid’ and this is in angularjs monitors the state of the form and input fields and let you notify the user about the current state.
Step By Step Guide On Angularjs Form Validation In Controller :-
In our application we used directives of ‘ng-submit, ng-model, ng-bind’. Ng-submit used to specify the functions to be run on submit events.
It can be used to prevent the form from submission if it does not contain an action.
The ng-bind directive is used to append users input name on webpage with existing content.
Ng-model is a directive which binds input, select and textarea, and stores the required user value in a variable whenever we require that value.
<!DOCTYPE HTML>
<html>
<head>
<title>Form Validation in Controller</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app=angular.module('myapp',[]);
app.controller('ctrl',function($scope){
$scope.submitform= function(form){
if(form.$valid){
console.log("form is valid");
}
}});
</script>
<div ng-app="myapp" ng-controller="ctrl">
<form name="fn" ng-submit="submitform(fn)">
<input type="text" ng-model="in" required>
<p><span ng-bind="in"></span> Welcome to the form</p>
</form>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- We created ‘app’ variable used to store our application and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements values.
- Using $scope object we defined our function ‘submitform()’ within that we needs to check current state by ‘$valid’ then printed ‘form is valid’ message to the user.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘myapp’ it defines our application and controller of application namely ‘ctrl’ by ng-controller directive.
- In form we specified name attribute of ‘fn’ and function ‘submitform()’ with parameter of form names value ‘fn’ using ‘ng-submit’ directive we can call when form is submitted by user.
- For collecting ‘user name’ we defined ‘input’ tag with attribute of ‘ng-model’ values ‘in’ with required it is help to makes all form elements to become mandatory.
- For displaying user input we used ‘ng-bind’ directive below <input> tag with <p> tag appending to existing texts.
- Before executing program we needs to check whether all html pair elements closed or not then check our <div> tag also closed respectively.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know form validation in controller using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program within form when user filling form details it is checking whether our form is valid or not then result will printed on browser console.
For seeing console result we need to right click on blank browser page select last option of ‘inspect’ then left side console panel will open with our result.
I hope this tutorial on angularjs form validation in controller helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
