AngularJS | ng-required Directive
The ng-required Directive in AngularJS is used to specify the required attribute of an HTML element. The input field in the form is required only if the expression inside ng-required directive returns true. It is Supported by <input>, <select> and <textarea>.
Syntax:
<element ng-required="expression"> Contents... </element>
Example 1: This example uses ng-required Directive to set input text field of form tag to required.
<!DOCTYPE html> < html > < head > < title >ng-required Directive</ title > < script src = </ script > < style > .req { font-size: 90%; font-style: italic; color: red; } </ style > </ head > < body style = "text-align:center" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >ng-required Directive</ h2 > < div ng-app = "app" ng-controller = "myCtrl" > < form name = "myForm" > < p >Enter Your Name: < br /> < span > < input type = "text" name = "name" ng-model = "Name" ng-required = "true" /> </ span > </ p > < span ng-show = "myForm.name.$invalid" class = "req" > This is the required field. </ span > </ form > </ div > < script > var app = angular.module("app", []); app.controller("myCtrl", function($scope) { $scope.Name = ""; }); </ script > </ body > </ html > |
Output:
Before Input the name:
After Input the name:
Example 2: This example uses ng-required Directive to create required field after checked the checkbox.
<!DOCTYPE html> < html > < head > < title >ng-required Directive</ title > < script src = </ script > </ head > < body ng-app = "app" style = "text-align:center" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >ng-required Directive</ h2 > < div ng-controller = "geek" style = "font-family:arial;" > < form name = "myform" > < label for = "requiredValue" > Is Required: </ label > < input type = "checkbox" ng-model = "requiredValue" id = "required" /> < br >< br > < label for = "input" >Enter Name: </ label > < input type = "text" ng-model = "model" id = "input" name = "input" ng-required = "requiredValue" /> < br > < p style = "color:red;" ng-show = 'myform.input.$error.required' > Name is required </ p > </ form > </ div > < script > var app = angular.module('app', []) app.controller('geek', ['$scope', function($scope) { $scope.requiredValue = true; }]); </ script > </ body > </ html > |
Output:
Before checked the checkbox:
After checked the checkbox:
Recommended Posts:
- AngularJS | ng-app Directive
- AngularJS | ng-if Directive
- AngularJS | ng-jq Directive
- AngularJS | ng-src Directive
- AngularJS | ng-cut Directive
- AngularJS | ng-value Directive
- AngularJS | ng-csp Directive
- AngularJS | Directive
- AngularJS | ng-selected Directive
- AngularJS | ng-paste Directive
- AngularJS | ng-srcset Directive
- AngularJS | ng-readonly Directive
- AngularJS | ng-blur Directive
- AngularJS | ng-bind Directive
- AngularJS | textarea Directive
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.