AngularJS | ng-required Directive - GeeksforGeeks

28 Mar, 2019
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="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>    <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="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:Before checked the checkbox:After checked the checkbox:
AngularJS-Directives
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?