AngularJS ng-required Directive Last Updated : 01 Aug, 2022 Summarize Suggest changes Share Like Article Like Report 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;"> GeeksforGeeks </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"> 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: Advertise with us Next Article AngularJS ng-readonly Directive V Vishal Chaudhary 2 Follow Similar Reads AngularJS ng-readonly Directive The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside the ng-readonly directive returns true. The ng-readonly directive is required to change the value between true and false. In case, if t 2 min read AngularJS | ng-selected Directive The ng-selected Directive in AngularJS is used to specify the selected attribute of an HTML element. It can be used to select the default value specified on an HTML element. If the expression inside the ng-selected directive returns true then the selected option value will be displayed otherwise not 1 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-submit Directive The ng-submit Directive in AngularJS is 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. It is supported by <form> element. Syntax: <form ng-submit="expression"> Content ... </form>Parame 2 min read AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read AngularJS ng-pattern Directive The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-patter 2 min read Article Tags : Web Technologies AngularJS AngularJS-Directives Like