{"id":258458,"date":"2024-04-12T22:35:39","date_gmt":"2024-04-12T22:35:39","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=258458"},"modified":"2024-04-12T22:35:39","modified_gmt":"2024-04-12T22:35:39","slug":"how-to-access-formcontrol-value-in-angular-2","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/","title":{"rendered":"How to access formControl value in Angular?"},"content":{"rendered":"<p>When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation, manipulation, or submitting data to a server. In this article, we will explore different ways to access the form control value in Angular.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#1_Using_ngModel\" title=\"1. Using ngModel\">1. Using ngModel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#2_Using_FormControl\" title=\"2. Using FormControl\">2. Using FormControl<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#3_Using_FormGroup\" title=\"3. Using FormGroup\">3. Using FormGroup<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#FAQs\" title=\"FAQs:\">FAQs:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#1_How_to_access_the_form_control_value_in_Angular_when_using_reactive_forms\" title=\"1. How to access the form control value in Angular when using reactive forms?\">1. How to access the form control value in Angular when using reactive forms?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#2_Can_I_access_the_form_control_value_directly_from_the_template_in_Angular\" title=\"2. Can I access the form control value directly from the template in Angular?\">2. Can I access the form control value directly from the template in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#3_How_can_I_access_the_value_of_a_specific_form_control_in_a_FormGroup\" title=\"3. How can I access the value of a specific form control in a FormGroup?\">3. How can I access the value of a specific form control in a FormGroup?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#4_How_do_I_check_if_a_form_control_is_empty_in_Angular\" title=\"4. How do I check if a form control is empty in Angular?\">4. How do I check if a form control is empty in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#5_Can_I_access_the_form_control_value_on_form_submission\" title=\"5. Can I access the form control value on form submission?\">5. Can I access the form control value on form submission?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#6_What_if_my_form_control_is_nested_within_a_form_group\" title=\"6. What if my form control is nested within a form group?\">6. What if my form control is nested within a form group?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#7_How_to_access_the_form_control_value_in_Angular_if_it_is_disabled\" title=\"7. How to access the form control value in Angular if it is disabled?\">7. How to access the form control value in Angular if it is disabled?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#8_How_do_I_update_the_form_control_value_programmatically_in_Angular\" title=\"8. How do I update the form control value programmatically in Angular?\">8. How do I update the form control value programmatically in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#9_What_if_I_want_to_access_the_form_control_value_on_every_keystroke\" title=\"9. What if I want to access the form control value on every keystroke?\">9. What if I want to access the form control value on every keystroke?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#10_How_to_reset_the_form_control_value_in_Angular\" title=\"10. How to reset the form control value in Angular?\">10. How to reset the form control value in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#11_How_to_get_the_initial_value_of_the_form_control_in_Angular\" title=\"11. How to get the initial value of the form control in Angular?\">11. How to get the initial value of the form control in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#12_Can_I_access_the_form_control_value_asynchronously_in_Angular\" title=\"12. Can I access the form control value asynchronously in Angular?\">12. Can I access the form control value asynchronously in Angular?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Using_ngModel\"><\/span>1. Using ngModel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Angular provides a built-in directive called ngModel that allows us to bind input elements to properties in the component. By utilizing this directive, we can easily access the form control value. For example, let&#8217;s consider a form with an input field:<\/p>\n<pre><code><br \/>\n&lt;input type=\"text\" [(ngModel)]=\"username\"&gt;<br \/>\n<\/code><\/pre>\n<p>In the component file, we can access the form control value using the corresponding property name:<\/p>\n<pre><code><br \/>\nexport class MyComponent {<br \/>\n  username: string;<br \/>\n<br \/>\n  \/\/ Accessing form control value<br \/>\n  accessValue() {<br \/>\n    console.log(this.username);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"2_Using_FormControl\"><\/span>2. Using FormControl<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Another way to access the form control value is by using the FormControl class provided by Angular. FormControl represents an individual form control in a form group and provides access to its value. To demonstrate this, first, we need to import the FormControl class:<\/p>\n<pre><code><br \/>\nimport { FormControl } from '@angular\/forms';<br \/>\n<\/code><\/pre>\n<p>Next, we can create an instance of FormControl and bind it to the input field:<\/p>\n<pre><code><br \/>\nusernameControl = new FormControl('');<br \/>\n<br \/>\n&lt;input type=\"text\" [formControl]=\"usernameControl\"&gt;<br \/>\n<\/code><\/pre>\n<p>To access the value, we can simply use the value property of the FormControl instance:<\/p>\n<pre><code><br \/>\nexport class MyComponent {<br \/>\n  usernameControl = new FormControl('');<br \/>\n<br \/>\n  \/\/ Accessing form control value<br \/>\n  accessValue() {<br \/>\n    console.log(this.usernameControl.value);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"3_Using_FormGroup\"><\/span>3. Using FormGroup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you have multiple form controls and want to access their values together, you can make use of FormGroup. FormGroup represents a collection of form controls and provides access to the values of all the controls within it. Here&#8217;s how we can do it:<\/p>\n<p>First, import the FormGroup class:<\/p>\n<pre><code><br \/>\nimport { FormGroup, FormControl } from '@angular\/forms';<br \/>\n<\/code><\/pre>\n<p>Then, create an instance of FormGroup and add individual FormControl instances to it:<\/p>\n<pre><code><br \/>\nmyForm = new FormGroup({<br \/>\n  username: new FormControl('')<br \/>\n});<br \/>\n<\/code><\/pre>\n<p>To access the form control value, we use the value property of the form group:<\/p>\n<pre><code><br \/>\nexport class MyComponent {<br \/>\n  myForm = new FormGroup({<br \/>\n    username: new FormControl('')<br \/>\n  });<br \/>\n<br \/>\n  \/\/ Accessing form control value<br \/>\n  accessValue() {<br \/>\n    console.log(this.myForm.value.username);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"1_How_to_access_the_form_control_value_in_Angular_when_using_reactive_forms\"><\/span>1. How to access the form control value in Angular when using reactive forms?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the value property of the FormControl or FormGroup instance to access the form control value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Can_I_access_the_form_control_value_directly_from_the_template_in_Angular\"><\/span>2. Can I access the form control value directly from the template in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can use interpolation or property binding to display the form control value directly in the template.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_How_can_I_access_the_value_of_a_specific_form_control_in_a_FormGroup\"><\/span>3. How can I access the value of a specific form control in a FormGroup?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the dot notation (e.g., formGroup.value.controlName) to access the value of a specific form control within a FormGroup.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_How_do_I_check_if_a_form_control_is_empty_in_Angular\"><\/span>4. How do I check if a form control is empty in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the value property of the form control and compare it with an empty string or null to check if it&#8217;s empty.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Can_I_access_the_form_control_value_on_form_submission\"><\/span>5. Can I access the form control value on form submission?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can access the form control value on form submission by using the submit event of the form and accessing the value property of the form control.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_What_if_my_form_control_is_nested_within_a_form_group\"><\/span>6. What if my form control is nested within a form group?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIf your form control is nested within a form group, you can use the dot notation (e.g., formGroup.value.nestedFormGroup.controlName) to access the value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_How_to_access_the_form_control_value_in_Angular_if_it_is_disabled\"><\/span>7. How to access the form control value in Angular if it is disabled?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nEven if a form control is disabled, you can still access its value by using the value property of the FormControl instance.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_How_do_I_update_the_form_control_value_programmatically_in_Angular\"><\/span>8. How do I update the form control value programmatically in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the patchValue() or setValue() methods of the FormControl instance to update the form control value programmatically.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_What_if_I_want_to_access_the_form_control_value_on_every_keystroke\"><\/span>9. What if I want to access the form control value on every keystroke?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the valueChanges observable provided by the form control to get the form control value on every keystroke.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_How_to_reset_the_form_control_value_in_Angular\"><\/span>10. How to reset the form control value in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can use the reset() method of the FormControl or FormGroup instance to reset the form control value to its initial state.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_How_to_get_the_initial_value_of_the_form_control_in_Angular\"><\/span>11. How to get the initial value of the form control in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can store the initial value when initializing the form control and access it later when needed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"12_Can_I_access_the_form_control_value_asynchronously_in_Angular\"><\/span>12. Can I access the form control value asynchronously in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can use async validators or subscribe to the valueChanges observable to access the form control value asynchronously.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation, manipulation, or submitting data to a server. In this article, we will explore different ways to access the form control value in Angular. 1. Using ngModel Angular provides a built-in &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to access formControl value in Angular?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#more-258458\">Read more<span class=\"screen-reader-text\">How to access formControl value in Angular?<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":107420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86279],"tags":[],"class_list":["post-258458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","no-featured-image-padding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to access formControl value in Angular?<\/title>\n<meta name=\"description\" content=\"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to access formControl value in Angular?\" \/>\n<meta property=\"og:description\" content=\"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/synchronyfinancial\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-12T22:35:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Timothy Mathis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@synchrony\" \/>\n<meta name=\"twitter:site\" content=\"@synchrony\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Timothy Mathis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\"},\"author\":{\"name\":\"Timothy Mathis\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\"},\"headline\":\"How to access formControl value in Angular?\",\"datePublished\":\"2024-04-12T22:35:39+00:00\",\"dateModified\":\"2024-04-12T22:35:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\"},\"wordCount\":667,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"articleSection\":[\"Learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\",\"name\":\"How to access formControl value in Angular?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-04-12T22:35:39+00:00\",\"dateModified\":\"2024-04-12T22:35:39+00:00\",\"description\":\"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/namso-gen.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to access formControl value in Angular?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"description\":\"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co\",\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/namso-gen.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"contentUrl\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"width\":500,\"height\":164,\"caption\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\"},\"image\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/synchronyfinancial\",\"https:\/\/twitter.com\/synchrony\",\"https:\/\/www.youtube.com\/synchronyfinancial\",\"https:\/\/www.instagram.com\/synchrony\",\"https:\/\/www.linkedin.com\/company\/synchrony-financial\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\",\"name\":\"Timothy Mathis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Timothy Mathis\"},\"description\":\"Guest author Timothy Mathis has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to access formControl value in Angular?","description":"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,","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:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/","og_locale":"en_US","og_type":"article","og_title":"How to access formControl value in Angular?","og_description":"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,","og_url":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/","og_site_name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","article_publisher":"https:\/\/www.facebook.com\/synchronyfinancial","article_published_time":"2024-04-12T22:35:39+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png","type":"image\/png"}],"author":"Timothy Mathis","twitter_card":"summary_large_image","twitter_creator":"@synchrony","twitter_site":"@synchrony","twitter_misc":{"Written by":"Timothy Mathis","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/"},"author":{"name":"Timothy Mathis","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318"},"headline":"How to access formControl value in Angular?","datePublished":"2024-04-12T22:35:39+00:00","dateModified":"2024-04-12T22:35:39+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/"},"wordCount":667,"commentCount":0,"publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"articleSection":["Learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/","url":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/","name":"How to access formControl value in Angular?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-04-12T22:35:39+00:00","dateModified":"2024-04-12T22:35:39+00:00","description":"When working with forms in Angular, it is essential to be able to access the form control values to perform various operations such as validation,","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-to-access-formcontrol-value-in-angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/namso-gen.co\/blog\/"},{"@type":"ListItem","position":2,"name":"How to access formControl value in Angular?"}]},{"@type":"WebSite","@id":"https:\/\/namso-gen.co\/blog\/#website","url":"https:\/\/namso-gen.co\/blog\/","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","description":"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co","publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/namso-gen.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/namso-gen.co\/blog\/#organization","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","url":"https:\/\/namso-gen.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","contentUrl":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","width":500,"height":164,"caption":"Namso Gen Blog - Free Credit Card Generator [100% Valid]"},"image":{"@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/synchronyfinancial","https:\/\/twitter.com\/synchrony","https:\/\/www.youtube.com\/synchronyfinancial","https:\/\/www.instagram.com\/synchrony","https:\/\/www.linkedin.com\/company\/synchrony-financial"]},{"@type":"Person","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318","name":"Timothy Mathis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Timothy Mathis"},"description":"Guest author Timothy Mathis has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here."}]}},"_links":{"self":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/comments?post=258458"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258458\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media\/107420"}],"wp:attachment":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media?parent=258458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=258458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=258458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}