AngularJS ngrequired



  • The ng-required directive in AngularJS used to sets the required attribute of a form field (Like input or textarea).
  • It specifies the required attribute of an element.
  • The form field will be required if the expression inside the ng-required attribute returns true.
  • It mainly used for input, textarea and select controls, but it can also use for custom controls
  • The ng-required directive is necessary to move the value between true and false.
  • In HTML, we cannot set the required attribute value to false (The presence of required attribute makes the element value is required)
  • This directive executes at priority level 0.

Syntax for ng-required directive in AngularJS:

<input ng-required=”expression” ></input>

Parameter Values:

Value Description
expression Denotes an expression will set the required attribute if it returns the true value.

Sample coding for ng-required directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"></script>
    </head>
    <body>
        <form ng-app="myApp" name="form" ng-controller="requiredCtrl">
            <h3>ng-required Directive in AngularJS Tutorial</h3>
            Toggle required:
            <input type="checkbox" ng-model="required"><br>
            Enter the text:
            <input type="text" ng-model="model" name="input" 
            ng-required="required" /><br>
            <p>form.input.$error.required = {{ form.input.$error.required }}</p>
            <p>model = {{model}}</p>
        </form>
        <script>
            var app=angular.module('myApp', []);
            app. controller('requiredCtrl', ['$scope', function($scope) {
                $scope. required = true;
            }]);
        </script>
    </body>
</html>

Code Explanation for ng-required directive in AngularJS:

Code Explanation for AngularJS ngrequired

  1. The ng-app specifies the root element (“myApp”) to define AngularJS application.
  2. The ng-controller specifies the application controller in AngularJS the controller value is given as “requiredCtrl”.
  3. The ng-model bind an input field value to AngularJS application variable (“required”).
  4. The “checkbox” is declare the type value of the <input> tag.
  5. The “text” is declare the type value of the <input> tag.
  6. The ng-required directive sets the required attribute of an input field. Here sets the ng-required directive to “required”.
  7. Form.input.$error.required is used to text is required or not. If the text is required and the output will be displays true.
  8. The value is given as true in the scope object.

Sample Output for ng-required directive in AngularJS:

Sample Output1 for AngularJS ngrequired

  1. The output displays the default value of true because the text is required in the input field.

Sample Output2 for AngularJS ngrequired

  1. The output shows the user click the checkbox
  2. If the user type text in the input field as “wikitechy”.
  3. The output displays the model as “wikitechy” because the required attribute is false.


Related Searches to angularjs ngrequired directive