{"id":46784,"date":"2019-01-07T09:30:04","date_gmt":"2019-01-07T04:00:04","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46784"},"modified":"2020-01-31T10:46:35","modified_gmt":"2020-01-31T05:16:35","slug":"ngmodel-in-angularjs","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/","title":{"rendered":"Learn ngmodel in AngularJS &#8211; How to use ng-model Directive?"},"content":{"rendered":"<p>After<a href=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\"><strong> MVC Architecture<\/strong><\/a>, we are going to discuss ngmodel in Angular JS. Model is a component of MVC architecture, which we can use to create an angular application. In this ngmodel tutorial, we will study\u00a0ng-model in AngularJS for binding input control with application data, for application status, for validation, for complex models, and with getter and setter.<\/p>\n<p>Angular JS is a framework that appears simple at first, but start to use it to develop an application even just a bit complex and you will see a lot of questions but can&#8217;t answer them. AngularJS, a good framework that it leaves you with enough flexibility. But flexibility also means that you need to figure out on your own how to solve this issue in angular?<\/p>\n<p>So, are you ready to learn ngmodel in AngularJS?<\/p>\n<div id=\"attachment_46797\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46797\" class=\"size-full wp-image-46797\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg\" alt=\"ngmodel in AngularJS\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46797\" class=\"wp-caption-text\">Learn ngmodel in AngularJS &#8211; How to use ng-model Directive?<\/p><\/div>\n<h2>1. What is AngularJS Model?<\/h2>\n<p>Model is a component of <strong>MVC architecture<\/strong>, which we can use to create an angular application.<\/p>\n<p>The request made by the user from view part is managed in model part.<\/p>\n<p>Suppose you are entering text in the input field and the text you are entering is displaying on the same page since it is a single page application. It is made possible because the coding is done in the model part. Therefore, we can connect the model part and view part with each other.<\/p>\n<h2>2. ngmodel in AngularJS<\/h2>\n<p>The ngmodel in AngualrJS is <strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\">directive<\/a><\/strong> to bind the value of an HTML control (input, select, text area) or input field to an application data (variables) created in AngularJS. It ensures the synchronization between a model part and view part.<\/p>\n<p>The various purposes of ngmodel are as follows:<\/p>\n<ul>\n<li>View is bind with a model using ng-model directive, which other directives such as input, select or text area will require.<\/li>\n<li>Validations behaviour can be provided using it.<\/li>\n<li>We can use ngmodel to keep the state of control.<\/li>\n<li>ngmodel is responsible for registering the control with its parent form.<\/li>\n<\/ul>\n<p><strong>Example-<\/strong>\u00a0You are registering on a site and the owner of the site wants your data to get saved in a database. But he is displaying a single registration form page to a user. At that time, ngmodel in AngularJS can be used to map the value of controls and data model.<\/p>\n<p><em>NOTE: Directives Executes At Priority Level 1.<\/em><\/p>\n<h3>i. ngmodel for binding input control with application data<\/h3>\n<p>For<a href=\"https:\/\/data-flair.training\/blogs\/data-binding-in-angularjs\/\"><strong> binding the value<\/strong><\/a> of various input controls with the application data of our application, we can use the <strong>ngmodel directive<\/strong>.<\/p>\n<p>Various input controls with which we can use ngmodel directives are:<\/p>\n<p>a. Input<\/p>\n<ul>\n<li>Text<\/li>\n<li>Checkbox<\/li>\n<li>Radio<\/li>\n<li>Number<\/li>\n<li>Email<\/li>\n<li>URL<\/li>\n<li>Date<\/li>\n<li>Datetime-local<\/li>\n<li>Time<\/li>\n<li>Month<\/li>\n<li>Week<\/li>\n<\/ul>\n<p>b. Select<\/p>\n<p>c. Text area<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n&lt;div ng-app=\"demoone\" ng-controller=\"myCtrl\"&gt;\r\nEnter Text: &lt;input ng-model=\"name\"&gt;\r\n&lt;h1&gt;You Entered: {{name}}&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar one = angular.module('demoone', []);\r\none.controller('myCtrl', function($scope) {\r\n$scope.name = \"Angular\";\r\n});\r\n&lt;\/script&gt;\r\n&lt;p&gt;Change the text inside the input field, and you will see according to the text inside input field, the text in the header changes.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Enter Text: Angular<\/p>\n<p>You Entered: Angular<\/p>\n<p>Change the text inside the input field, and you will see according to the text inside the input field, the text in the header changes.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\">Recommended reading &#8211; AngularJS Modules<\/a><\/strong><\/p>\n<h3>ii. The\u00a0ngmodel in AngularJS for application status<\/h3>\n<p>Status for application, data can be provided using ngmodel directive.<\/p>\n<p>Various application status with which we can use ng-model directive are:<\/p>\n<ul>\n<li><strong>ng-valid:<\/strong>\u00a0Use to check the model is valid or not. It returns a\u00a0true value if, a model is valid.<\/li>\n<li><strong>ng-invalid:<\/strong>\u00a0Use to check that the model is invalid or not. It returns a\u00a0true value if, a\u00a0model is invalid.<\/li>\n<li><strong>ng-pristine:<\/strong> It returns a\u00a0true value if the user hasn&#8217;t interacted with control yet.<\/li>\n<li><strong>ng- dirty:<\/strong> It returns a\u00a0true value if the user has already interacted with control.<\/li>\n<li><strong>ng-touched:<\/strong> It will return a true value if the control blurs or the control focus.<\/li>\n<li><strong>ng-untouched:<\/strong> It will return a\u00a0true value if the control hasn&#8217;t been blurred or the control has not lost focus yet.<\/li>\n<li><strong>ng-pending:<\/strong>\u00a0Use to test, if any $asyncValidators are unfulfilled or pending on the whole form or a specific input element.<\/li>\n<\/ul>\n<p><strong>We will discuss more in article form validations.<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n\r\n&lt;form ng-app=\"\" name=\"value\" ng-init=\"myText = 'xyz@myweb.com'\"&gt;\r\n\r\nEnter Email:\r\n&lt;input type=\"email\" name=\"value\" ng-model=\"myText\" required&gt;\r\n&lt;p&gt;change the e-mail address, and try to change the status.&lt;\/p&gt;\r\n&lt;h1&gt;Status&lt;\/h1&gt;\r\n&lt;p&gt;Valid: {{myForm.value.$valid}} (if true, the value meets all criteria).&lt;\/p&gt;\r\n&lt;p&gt;Dirty: {{myForm.value.$dirty}} (if true, the value has been changed).&lt;\/p&gt;\r\n&lt;p&gt;Touched: {{myForm.value.$touched}} (if true, the field has been in focus).&lt;\/p&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Enter Email: xyz@myweb.com<\/p>\n<p>Change the e-mail address, and try to change the status.<\/p>\n<p><strong>Status<\/strong><\/p>\n<p>Valid: (if true, the value meets all criteria).<\/p>\n<p>Dirty: (if true, the value has been changed).<\/p>\n<p>Touched: (if true, the field has been in focus).<\/p>\n<h3>ii. ng-model for validation<\/h3>\n<p>It provides type validation for application data.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n\r\n&lt;form ng-app=\"\" name=\"myFirstForm\"&gt;\r\nEnter Email:\r\n&lt;input type=\"email\" name=\"value\" ng-model=\"text\"&gt;\r\n&lt;span ng-show=\"myFirstForm.value.$error.email\"&gt;Not a valid e-mail address&lt;\/span&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;p&gt;Enter your e-mail address. Angular will display a message if the address is not an e-mail.&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Enter Email:<\/p>\n<p>Enter your e-mail address. Angular will display a message if the address is not an e-mail.<\/p>\n<p>Suppose you entered a text angular in the input field the output will be<\/p>\n<p>Enter Email: Angular (Not a valid e-mail address)<\/p>\n<p>Enter your e-mail address. Angular will display a message if the address is not an e-mail.<\/p>\n<p>Suppose you entered a text xyz2@gmail.com in the input field the output will be:<\/p>\n<p>Enter Email: xyz2@gmail.com<\/p>\n<p>Enter your e-mail address. Angular will display a message if the address is not an e-mail.<\/p>\n<h3>iv. Complex models<\/h3>\n<p>ng-model directive watches the model by reference, not value by default. This is important to know, in case you are binding inputs to models that are objects such as date or collections or arrays. ngmodel in AngularJS will not be notified if only properties of the object or collection change and so the input will not be re-rendered as the value is not changed. To display the input as per the changes user made in properties of object or collection, a model must be assigned an entirely new object or collection before a re-rendering will occur.<\/p>\n<p>Some directives have an option to use a $watchCollection method on the model expression. This method does a shallow comparison. It means changing properties deeper than the first level of the object (or only changing the properties of an item in the collection if it&#8217;s an array). It will still not trigger a re-rendering of the model.<\/p>\n<h3>v. ng-model with getter and setter<\/h3>\n<p>It is a function used to return a representation of the model when called with zero parameter or argument. And when called with an argument or parameter sets the value internal state of a model. It is useful to use getter and setter for models when there is an internal representation of the model that is different from what models expose to view part.<\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">ng-model-options=\"{ getterSetter: true }\"<\/pre>\n<p>We can add above syntax to an element that has ngmodel attached to it. You can add this to form too which will enable this behaviour for all &lt;input&gt;s within it.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!doctype html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;title&gt;Getter Setter Example&lt;\/title&gt;\r\n\r\n&lt;script src=\"\/\/code.angularjs.org\/snapshot\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"app.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;\/head&gt;\r\n&lt;body ng-app=\"myapp\"&gt;\r\n&lt;div ng-controller=\"controllerexample\"&gt;\r\n&lt;form name=\"myForm\"&gt;\r\n&lt;label&gt;Enter Name:\r\n&lt;input type=\"text\" name=\"value\"\r\nng-model=\"user.name\"\r\nng-model-options=\"{ getterSetter: true }\" \/&gt;\r\n&lt;\/label&gt;\r\n&lt;\/form&gt;\r\n&lt;pre&gt;name Of user= &lt;span ng-bind=\"user.name()\"&gt;&lt;\/span&gt;&lt;\/pre&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Enter Name:<\/p>\n<p>name Of user=<\/p>\n<p>When you enter some text in the input field the output will be:<\/p>\n<p>Enter Name: Ram Kumar<\/p>\n<p>name Of user= Ram Kumar<\/p>\n<h2>3. Conclusion<\/h2>\n<p>In the above article, we discussed <strong><a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngModel\">ngmodel<\/a><\/strong> in AngularJS, a model part of MVC architecture in a detailed manner. But the primary focus of the model is to bind the data with view part. We can use the ng-model directive for binding. Furthermore, we studied various input controls where the ng-model directive is used. Hope you liked our explanation. Still, if you have a query, feel free to ask in the comment tab.<span hidden class=\"__iawmlf-post-loop-links\" data-iawmlf-links=\"[{&quot;id&quot;:1690,&quot;href&quot;:&quot;https:\\\/\\\/docs.angularjs.org\\\/api\\\/ng\\\/directive\\\/ngModel&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250323004454\\\/https:\\\/\\\/docs.angularjs.org\\\/api\\\/ng\\\/directive\\\/ngModel&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 17:17:11&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-04 20:49:47&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-03 07:20:18&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-20 09:31:33&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-16 00:34:25&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-22 22:07:52&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-22 22:07:52&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>After MVC Architecture, we are going to discuss ngmodel in Angular JS. Model is a component of MVC architecture, which we can use to create an angular application. In this ngmodel tutorial, we will&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":46797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[18322,18321,18116,18320,18323,18319],"class_list":["post-46784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-model","tag-angularjs-ngmodel","tag-ng-model","tag-ngmodel","tag-ngmodel-directive","tag-ngmodel-in-angularjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Learn ngmodel in AngularJS - How to use ng-model Directive? - DataFlair<\/title>\n<meta name=\"description\" content=\"What is ngmodel in AngularJS, learn how to use ng-model directive-Binding Input Control with Application Data,Application Status,Validation, Getter &amp; Setter\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn ngmodel in AngularJS - How to use ng-model Directive? - DataFlair\" \/>\n<meta property=\"og:description\" content=\"What is ngmodel in AngularJS, learn how to use ng-model directive-Binding Input Control with Application Data,Application Status,Validation, Getter &amp; Setter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-07T04:00:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn ngmodel in AngularJS - How to use ng-model Directive? - DataFlair","description":"What is ngmodel in AngularJS, learn how to use ng-model directive-Binding Input Control with Application Data,Application Status,Validation, Getter & Setter","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"Learn ngmodel in AngularJS - How to use ng-model Directive? - DataFlair","og_description":"What is ngmodel in AngularJS, learn how to use ng-model directive-Binding Input Control with Application Data,Application Status,Validation, Getter & Setter","og_url":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-01-07T04:00:04+00:00","article_modified_time":"2020-01-31T05:16:35+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Learn ngmodel in AngularJS &#8211; How to use ng-model Directive?","datePublished":"2019-01-07T04:00:04+00:00","dateModified":"2020-01-31T05:16:35+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/"},"wordCount":1180,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg","keywords":["AngularJS Model","AngularJS ngmodel","ng-model","ngmodel","ngmodel directive","ngmodel in AngularJS"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/","url":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/","name":"Learn ngmodel in AngularJS - How to use ng-model Directive? - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg","datePublished":"2019-01-07T04:00:04+00:00","dateModified":"2020-01-31T05:16:35+00:00","description":"What is ngmodel in AngularJS, learn how to use ng-model directive-Binding Input Control with Application Data,Application Status,Validation, Getter & Setter","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/ngmodel-in-AngularJS-01.jpg","width":1200,"height":628,"caption":"Learn ngmodel in AngularJS - How to use ng-model Directive?"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"Learn ngmodel in AngularJS &#8211; How to use ng-model Directive?"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=46784"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46784\/revisions"}],"predecessor-version":[{"id":47100,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46784\/revisions\/47100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/46797"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=46784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=46784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=46784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}