{"id":90197,"date":"2019-03-29T16:22:24","date_gmt":"2019-03-29T14:22:24","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=90197"},"modified":"2019-03-29T16:22:25","modified_gmt":"2019-03-29T14:22:25","slug":"angular-6-reactive-form-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html","title":{"rendered":"Angular 6 Reactive Form Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic of Reactive Forms in angular and perform some validations on the form.<\/p>\n<h2>1. Introduction<\/h2>\n<p>In a web application, a form is a common approach that allows users to submit input and interact with the application. Frequently used for user login, information search, and feedback submission. The angular framework provides <em>Template-driven<\/em> and <em>Reactive-driven<\/em> forms to communicate with the users.<\/p>\n<ul>\n<li>The template-driven forms use the in-built directives (such as <code>ngModel<\/code>, <code>ngModelGroup<\/code>, and <code>ngForm<\/code>) available in the Forms module<\/li>\n<li>The reactive driven forms use the <code>FormControl<\/code>, <code>FormGroup<\/code>, and <code>FormBuilder<\/code> classes available in the Reactive Forms module\n<ul>\n<li>Offer predictability and synchronous access to the data model<\/li>\n<li>Offer reactive patterns, testing, and validation<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>To work with reactive forms, open the visual studio code and let us see how to implement this tutorial in angular 6 frameworks.<\/p>\n<h2>2. Angular 6 Reactive Form Example<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3>2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.<\/p>\n<h3>2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<\/p>\n<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"294\" height=\"681\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-structure-img-1.jpg\" alt=\"Angular 6 Reactive Form - Application Structure\" class=\"wp-image-90198\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-structure-img-1.jpg 294w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-structure-img-1-130x300.jpg 130w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating Angular application<\/h2>\n<p>Run the <code>ng new angular-assignment-reactiveforms-example<\/code> command in the npm console to create a new angular project. Once the new project is created, following the below steps.<\/p>\n<h3>3.1 Import Reactive forms module<\/h3>\n<p>To start working with the reactive forms we will need to import the <code>ReactiveFormsModule<\/code> module in <code>src\/app\/app.module.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>app.module.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">\/\/ Importing the reactive forms module.\nimport { ReactiveFormsModule } from '@angular\/forms';\n\n\/\/ Declaring the reactive forms module in the imports section of NgModule decorator.\nimports: [\n    BrowserModule, ReactiveFormsModule\n  ],\n<\/pre>\n<h3>3.2 Building the Form Template<\/h3>\n<p>To create a form we will use the different reactive form property tags introduced in the angular framework. We will,<\/p>\n<ul>\n<li>Use the <code>formGroup<\/code> property to bind our form with a name (i.e. <code>myform<\/code>). This will bind the form with a <code>FormGroup<\/code> object declared in the component class<\/li>\n<li>Use the <code>formControlName<\/code> property to bind the input fields to the individual form controls<\/li>\n<li>Use the <code>ngSubmit<\/code> property to submit the form and display the values on successful validation<\/li>\n<\/ul>\n<p>Add the following code the <code>src\/app\/app.component.html<\/code> file.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><span style=\"text-decoration: underline\"><em>app.component.html<\/em><\/span><\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;div class=\"container myWidth\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-md-6 offset-md-3\"&gt;\n      &lt;h2 class=\"text-center\"&gt;{{ title }}&lt;\/h2&gt;\n      &lt;hr \/&gt;\n      &lt;form [formGroup]=\"myForm\" (ngSubmit)=\"_formSubmit()\"&gt;\n        &lt;!-- NAME FIELD --&gt;\n        &lt;div class=\"form-group\"&gt;\n          &lt;input type=\"text\" formControlName=\"name\" class=\"form-control\" placeholder=\"Enter name\" \/&gt;\n          &lt;div *ngIf=\"myForm.controls.name.invalid &amp;&amp; myForm.controls.name.touched\" class=\"text-danger\"&gt;\n            &lt;small *ngIf=\"myForm.controls.name.errors.required\"&gt;Firstname is required.&lt;\/small&gt;\n            &lt;small *ngIf=\"myForm.controls.name.errors.pattern\"&gt;Only alphabets are allowed.&lt;\/small&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;!-- EMAIL ADDRESS FIELD --&gt;\n        &lt;div class=\"form-group\"&gt;\n          &lt;input type=\"text\" formControlName=\"email\" class=\"form-control\" placeholder=\"Enter email\" \/&gt;\n          &lt;div *ngIf=\"myForm.controls.email.invalid &amp;&amp; myForm.controls.email.touched\" class=\"text-danger\"&gt;\n            &lt;small *ngIf=\"myForm.controls.email.errors.required\"&gt;Email address is required.&lt;\/small&gt;\n            &lt;small *ngIf=\"myForm.controls.email.errors.email\"&gt;Email must be a valid email address.&lt;\/small&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;!-- PHONE FIELD --&gt;\n        &lt;div class=\"form-group\"&gt;\n          &lt;input type=\"text\" formControlName=\"phone\" class=\"form-control\" placeholder=\"Enter phone\" \/&gt;\n          &lt;div *ngIf=\"myForm.controls.phone.invalid &amp;&amp; myForm.controls.phone.touched\" class=\"text-danger\"&gt;\n            &lt;small *ngIf=\"myForm.controls.phone.errors.required\"&gt;Phone number is required.&lt;\/small&gt;\n            &lt;small *ngIf=\"myForm.controls.phone.errors.pattern\"&gt;Phone number is not valid.&lt;\/small&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;!-- COUNTRY LIST DROPDOWN --&gt;\n        &lt;div class=\"form-group\"&gt;\n          &lt;select class=\"form-control\" id=\"contry\" formControlName=\"country\"&gt;\n            &lt;option value=\"-1\" disabled&gt;Select country&lt;\/option&gt;\n            &lt;option *ngFor=\"let country of countries\" [value]=\"country.name\"&gt;{{country.name}}&lt;\/option&gt;\n          &lt;\/select&gt;\n        &lt;\/div&gt;\n        &lt;!-- SUBMIT BUTTON --&gt;\n        &lt;div class=\"form-group\"&gt;\n          &lt;input type=\"submit\" value=\"Submit\" [disabled]=\"myForm.invalid\" class=\"btn btn-success\" \/&gt;\n        &lt;\/div&gt;\n      &lt;\/form&gt;\n\n      &lt;div *ngIf=\"formData\"&gt;\n        &lt;strong&gt;Form Value&lt;\/strong&gt;: {{formData |json}}\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<h3>3.3 Initialize Form data and Validations<\/h3>\n<p>In the component class, we will initialize the form with default values and add some basic validations. In addition, we will define our form group, individual form controls within the form group, and the validator class to set the validation properties for each control. Add the following code the <code>src\/app\/app.component.ts<\/code> file<\/p>\n<p><span style=\"text-decoration: underline\"><em>app.component.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import { Component, OnInit } from '@angular\/core';\n\n\/\/ Importing the reactive form module classes.\nimport { FormGroup, FormBuilder, Validators } from '@angular\/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\n\nexport class AppComponent implements OnInit {\n  title = 'Angular6 Reactive forms example';\n\n  myForm: FormGroup;\n  formData: any;\n  countries = [];\n\n  constructor(private fb: FormBuilder) {\n\t \/\/ Initializing the countries drodpwn with dummy data.\n    this.countries = [\n      { 'id': 1, 'name': 'India', 'code': 'IN' },\n      { 'id': 2, 'name': 'Nepal', 'code': 'NP' },\n      { 'id': 3, 'name': 'United Kingdom', 'code': 'GB' },\n      { 'id': 4, 'name': 'United States', 'code': 'US' },\n    ];\n  }\n\n  _formValidate() {\n\t\/\/ Here we have used a form builder and an array to allow for multiple validation rules on a form.\n    this.myForm = this.fb.group(\n      {\n        name: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]+')])],\n        email: ['', Validators.compose([Validators.required, Validators.email])],\n        phone: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]+')])],\n        country: ['-1']\n      }\n    );\n  }\n\n  \/\/ To initialize the form group and validations in the 'ngOnInit' lifecycle hook.\n  ngOnInit() {\n    this._formValidate();\n  }\n\n  \/\/ To show how developers can access the form control values.\n  _formSubmit() {\n    this.formData = this.myForm.getRawValue();\n    console.log(this.formData);\n  }\n}\n<\/pre>\n<h2>4. Run the Application<\/h2>\n<p>As we are ready with all the changes, let us compile and run the angular application with <code>ng serve<\/code> command. Once the projects are successfully compiled and deployed, open the browser to test it.<\/p>\n<h2>5. Project Demo<\/h2>\n<p>Open your favorite browser and hit the angular application url (<code>http:\/\/localhost:4200\/<\/code>) to display the index page of the application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"327\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-1.jpg\" alt=\"Angular 6 Reactive Form - Welcome Page\" class=\"wp-image-90199\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-1-300x120.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-1-768x307.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 2: Welcome Page<\/figcaption><\/figure>\n<\/div>\n<p>A user can enter the form details and click Submit. If the form is successfully accepted and status is valid, he\/she will be able to see the form values.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"316\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-2.jpg\" alt=\"Angular 6 Reactive Form - Form Values\" class=\"wp-image-90200\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-2.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-2-300x116.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-2-768x297.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 3: Form Values<\/figcaption><\/figure>\n<\/div>\n<p>If a user has touched or blurs the input field but doesn\u2019t enter the value, the form status is invalidated and the error messages are displayed.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"377\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-3.jpg\" alt=\"Angular 6 Reactive Form - Error Messages\" class=\"wp-image-90201\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-3.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-3-300x138.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular6-reactiveforms-example-project-demo-img-3-768x354.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 4: Error Messages<\/figcaption><\/figure>\n<\/div>\n<p>That is all for this tutorial and I hope the article served you whatever you were expecting for. Happy Learning and do not forget to share!<\/p>\n<h2>6. Conclusion<\/h2>\n<p>In this section, we learned how to create a simple form model and bind it to the HTML form using reactive form classes. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>7. Download the Eclipse Project<\/h2>\n<p>This was a tutorial of Reactive Form in the angular framework.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular-assignment-reactiveforms-example.zip\"><strong>Angular 6 Reactive Form Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic of Reactive Forms in angular and perform some validations on the form. 1. Introduction In a web application, a form is a common approach that allows users to submit input and interact with the application. Frequently used for user login, information search, and feedback submission. &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[740],"class_list":["post-90197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular 6 Reactive Form Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 6 Reactive Form Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-29T14:22:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-29T14:22:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Angular 6 Reactive Form Example\",\"datePublished\":\"2019-03-29T14:22:24+00:00\",\"dateModified\":\"2019-03-29T14:22:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html\"},\"wordCount\":609,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html\",\"name\":\"Angular 6 Reactive Form Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2019-03-29T14:22:24+00:00\",\"dateModified\":\"2019-03-29T14:22:25+00:00\",\"description\":\"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-6-reactive-form-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Angular 6 Reactive Form Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 6 Reactive Form Example - Java Code Geeks","description":"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!","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:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html","og_locale":"en_US","og_type":"article","og_title":"Angular 6 Reactive Form Example - Java Code Geeks","og_description":"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!","og_url":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-03-29T14:22:24+00:00","article_modified_time":"2019-03-29T14:22:25+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Angular 6 Reactive Form Example","datePublished":"2019-03-29T14:22:24+00:00","dateModified":"2019-03-29T14:22:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html"},"wordCount":609,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html","url":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html","name":"Angular 6 Reactive Form Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2019-03-29T14:22:24+00:00","dateModified":"2019-03-29T14:22:25+00:00","description":"Interested to learn more about Angular 6? Then check out our detailed example on Angular 6 Reactive Form!","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-6-reactive-form-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Angular 6 Reactive Form Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/90197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=90197"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/90197\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=90197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=90197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=90197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}