AngularJS input Directive Last Updated : 04 Aug, 2022 Comments Improve Suggest changes Like Article Like Report In this article, we will see how the input Directive in AngularJS can be utilized to change the default behavior of <input> elements. This can be done with the help of the ng-model attribute present inside the <input> element. <input> is an HTML tag that is used to get user data using the input.ng-model, which is an angular directive that is used for data binding(i.e., reference to the input element is provided by the ng-model). These both are combined to modify the input field. Syntax: <input ng-model="name">The following states are established to the input field whose value is true for the following: $untouched: when the field has not been touched$touched: when the field has been touched$pristine: when the field has not been modified$dirty: when the field has been modified$invalid: when the field content is not valid$valid: when the field content is validThe value for each state represents the boolean value, i.e. either true or false. Example 1: This example illustrates the $valid state for the required input field in a form. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <title>AngularJS input Directive</title> </head> <body ng-app="" style="text-align:center;"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>AngularJS input Directive</h3> <form name="form1"> <input name="var1" ng-model="var1" required> </form> <p>{{var1}}</p> <p> The state of $valid is {{form1.var1.$valid}} </p> </body> </html> Output: For the above-mentioned input directive, there are few CSS classes are added, which are described below: ng-untouched: The field has not been touched yetng-touched: The field has been touchedng-pristine: The field has not been modified yetng-dirty: The field has been modifiedng-valid: The field content is validng-invalid: The field content is not validng-valid-key: One key for each validation. Example: ng-valid-requiredng-invalid-key: One key for each validation. Example: ng-invalid-requiredThe classes are removed if the value is false. Example 2: If the input field is used along with the required attribute, then the valid (when there is an input it is set to true) and invalid (when there is no input it is set to true) states are established. The classes are removed if the value is false. HTML <!DOCTYPE html> <html> <head> <title> AngularJS input Directive</title> <style> input.ng-invalid { background-color: green; } input.ng-valid { background-color: yellow; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="" style="text-align:center;"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>AngularJS input Directive</h3> <form name="form1"> <input name="var1" ng-model="var1" required> </form> <p>{{var1}}</p> <p> The state of $valid is {{form1.var1.$valid}} </p> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS input Directive S sivapriyatn Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-paste Directive The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and 2 min read AngularJS Directive AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwis 4 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 AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read AngularJS ng-cut Directive The ng-cut Directive in AngularJS is used to specify the custom behavior functions when the text in input fields is cut. It can be used when we want to call a function that will be triggered when the text is cut from the input field. It is supported by all input elements. Syntax: <element ng-cut= 2 min read AngularJS ng-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 min read What are Directives in AngularJS ? AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM mat 7 min read AngularJS ng-copy Directive The ng-copy Directive in AngularJS is used to specify the custom behavior functions during the copy of the text in input text fields. It can be used when we want to call a function that will be triggered when the text is copied from the input field. It is supported by all input elements. The element 2 min read Like