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 the ng-required directive returns true. It is supported by <input>, <select> and <textarea> tags.
Syntax:
<element ng-required="expression"> Contents... </element>
Example 1: This example uses the ng-required Directive to set the input text field of the form tag to required.
HTML
<!DOCTYPE html> < html > < head > < title >ng-required Directive</ title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" > </ script > < style > .req { font-size: 90%; font-style: italic; color: red; } </ style > </ head > < body style = "text-align:center" > < h1 style = "color:green;" > w3wiki </ h1 > < h3 >ng-required Directive</ h3 > < div ng-app = "app" ng-controller = "myCtrl" > < form name = "myForm" > < p >Enter Your Name: < br /> < span > < input type = "text" name = "gfg" ng-model = "Name" ng-required = "true" /> </ span > </ p > < span ng-show = "myForm.gfg.$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:
Example 2: This example uses the ng-required Directive to create the required field after checking the checkbox.
HTML
<!DOCTYPE html> < html > < head > < title >ng-required Directive</ title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" > </ script > </ head > < body ng-app = "app" style = "text-align:center" > < h1 style = "color:green" > w3wiki </ 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: