{"id":21696327,"url":"https://github.com/dinanathsj29/angular-forms-reactivemodeldriven-tutorial","last_synced_at":"2026-02-28T11:32:50.797Z","repository":{"id":38733968,"uuid":"194417794","full_name":"dinanathsj29/angular-forms-reactivemodeldriven-tutorial","owner":"dinanathsj29","description":"Learn Angular's dynamic Reactive Forms (Model Driven) step-by-step with live example.","archived":false,"fork":false,"pushed_at":"2023-01-05T20:27:48.000Z","size":7596,"stargazers_count":4,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T12:08:54.412Z","etag":null,"topics":["abstractcontrol","angular-reactive-forms","clearvalidators","formarray","formbuilder","formcontrol","formcontrolname","formgroup","formgroupname","patchvalue","setvalidators","setvalue","validators","valuechanges"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-29T15:01:41.000Z","updated_at":"2024-12-02T18:23:42.000Z","dependencies_parsed_at":"2023-02-04T15:03:30.061Z","dependency_job_id":null,"html_url":"https://github.com/dinanathsj29/angular-forms-reactivemodeldriven-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dinanathsj29/angular-forms-reactivemodeldriven-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular-forms-reactivemodeldriven-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29931705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T09:58:13.507Z","status":"ssl_error","status_checked_at":"2026-02-28T09:57:57.047Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abstractcontrol","angular-reactive-forms","clearvalidators","formarray","formbuilder","formcontrol","formcontrolname","formgroup","formgroupname","patchvalue","setvalidators","setvalue","validators","valuechanges"],"created_at":"2024-11-25T19:19:29.448Z","updated_at":"2026-02-28T11:32:50.775Z","avatar_url":"https://github.com/dinanathsj29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/angular_logo_1.png\" alt=\"Angular logo\" title=\"Angular logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nAngular Reactive Forms (Model driven)\n=====================\n\nWorking with existing/cloned/copied Angular App\n---------------------\n- Clone or Download the project/app from Github or any other sources\n- If using Visual Studio Code / Insiders, open Command panel/terminal from menu: View -\u003e Terminal (shortcut key is `CTRL + BackTick` OR `COMMAND + J`)\n- Go inside the project/app directory, command: `cd _examples-angular-templateDrivenForm OR cd templateDrivenForm`\n- Run command: `npm install` to install project/app dependencies `(node_modules)`\n- To Build and run Angular App, command: `ng serve / npm start` OR `ng serve -o` OR `ng serve --open`\n- To change the port from 4200 to other port - type command:  `ng serve --port 5000`\n- To check the application in browser type path/URL: `localhost:4200 / 5000`\n\n1 - Introduction to Reactive Forms (Model-driven)\n=====================\n1.1 Reactive Model Driven Forms - what is it all about?\n---------------------\n- Angular reactive forms, also known as model-driven forms, offers an easy way to use reactive programming styles-patterns and validations\n- Reactive forms are forms where we write logic, validations, controls in the component's class\n- It is flexible and can be used to handle complex form scenarios and large forms\n- We write more component code and less HTML code which make unit testing easier\n\n1.2. Some important points about Reactive Forms (Model Driven)\n---------------------\n- Code and Logic resides in the `component class` (Template Driven Forms focus mainly on HTML template)\n- `No Two Way Data Binding`\n    - (we need to react to user inputs to update the values, also some inbuilt angular methods are available to update component class)\n- Reactive forms are mainly `used/well suited for complex scenarios`:\n    - `Dynamic (On the Fly creation)` form fields\n        - Initially only one field, click on add button new forms/fields created dynamically (+ Add Product, + Add Friend list, + Add Permanent \u0026 temporary address, etc.)\n    - `Custom Validation (Crossfield validations)`- Password \u0026 Confirm Password validation, old \u0026 new password/pin validation etc.\n    - `Dynamic validation` - If subscribed to notification than email field is mandatory, hierarchy/dependency based scenarios, If Married enter spouse details, etc.\n- `Unit test` - As logic is present in component class (Template Driven Forms we cant unit test HTML templates)\n\n1.3. Steps to work with Reactive Model Driven Forms / Things to do with Reactive Model Driven Forms\n---------------------\n- Create \u0026 use new `Angular CLI` generated project\n- Add form HTML template/markup\n- Create a form model by using `FormGroup` and `FormControl` classes\n- Manage form control data/values\n- `FormBuilder` Service (a simpler way to specify/manage form model)\n- `Validation implementation` - Simple, Custom, Cross-field, and Dynamic validations\n- Add `Dynamic form controls`\n- Submit the form data to `server`\n\n2 - Setting up new Angular project\n=====================\n1. First check `angular cli` installed version details on machine by using command at command prompt: `ng -v` or `ng --version`\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/02-01-01-angular-cli.png\" alt=\"Angular CLI version\" title=\"command: `ng -v` or `ng --version` to check angular cli version\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular CLI version\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2. If `angular CLI` not installed/available on machine (no version or error message displayed) then install it by using the command: `npm install -g @angular/cli@latest`\n3. To `update/upgrade angular CLI` to the latest version, use following commands in sequence:\n    - command: `npm uninstall -g @angular/cli`\n    - command: `npm cache verify or npm cache clean`\n    - command: `npm install -g @angular/cli@latest`\n4. Generate/create a new Angular app/project with Angular CLI - for dealing with angular forms with the syntax: `ng new appName` or `ng new project-name`, command: `ng new angular-forms-reactivemodeldriven` (after creation check the newly generated folder structure)\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/02-01-02-angular-project-structure.png\" alt=\"Angular project/app folder structure\" title=\"Angular project/app folder structure\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular project/app folder structure\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n5. To run/serve application, at command prompt type command: `ng serve` or `ng serve --port 5000` or `ng serve --port 5000 -o` (`--port flag` - to change the port number and `-o or --open flag` - to automatically launch/open app in browser)\n6. Go to the browser and load the application by typing address: `http://localhost:4200/` or `http://localhost:5000/`\n7. Add the `Bootstrap` framework to an application (CSS framework used to make cool/intuitive User Interface and look/feel)\n    - Download bootstrap css to local machine from bootstrap website: https://getbootstrap.com/docs/4.1/getting-started/download/ into folder `assets/library/bootstrap.min.css`\n    - Include bootstrap in application - index.html under `head` tag - `\u003clink rel=\"stylesheet\" href=\"./assets/library/bootstrap.min.css\" integrity=\"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\" /\u003e`\n    - or you can include a `CDN` path in index.html under head tag\n    - or else you can install bootstrap with npm command: `npm install bootstrap` and use it\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/02-01-03-bootstrap-cdn.png\" alt=\"Bootstrap website - installation options\" title=\"Bootstrap website - installation options\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Bootstrap website - installation options\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n8. To verify bootstrap included/working properly in an application, check in Browser fonts, etc changed or not?\n    - Also in `app.component.html` just create any simple component like buttons or divs with bootstrap class: \n        - `\u003cbutton class=\"btn btn-success\"\u003eSuccess Button\u003c/button\u003e`  or \n        - `\u003cdiv class=\"lead\"\u003eLead Heading\u003c/div\u003e`\n        - Right click on element and check in `inspect element` the bootstrap class and properties applied to respective elements\n\n\u003e **Syntax \u0026 Example**: index.html\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eReactiveModelDrivenForms\u003c/title\u003e\n    \u003cbase href=\"/\"\u003e\n\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"./assets/library/bootstrap.min.css\" integrity=\"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\" /\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n\n    \u003capp-root\u003e\u003c/app-root\u003e\n\n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n3 - Adding Form Markup-Template HTML\n=====================\n3.1. Create an enrollment form with bootstrap classes: \n--------------------- \n- In file `app.component.html` create a registration form\n  1. Use bootstrap classes like `form-group` and `form-control` class with div and input field respectively to create form fields with standard look and feel\n  2. Create a user-name and email `input fields`\n  3. Create a password and confirm `password fields`\n  4. Create a submit button named `Register`\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cdiv class=\"container-fluid mb-5\"\u003e\n  \u003ch1\u003eRegistration Form\u003c/h1\u003e\n  \u003chr /\u003e\n\n  \u003cform\u003e\n\n    \u003c!-- user name --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n      \u003cinput type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n      \u003c!-- password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003ePassword:\u003c/label\u003e\n      \u003cinput type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n    \n    \u003c!-- confirm password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eConfirm Password:\u003c/label\u003e\n      \u003cinput type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- register button --\u003e\n    \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eRegister\u003c/button\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/03-01-01-form.png\" alt=\"Bootstrap Registration Form\" title=\"Bootstrap Registration Form\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Bootstrap Registration Form\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n4 - Creating the Form Model\n=====================\nTo work with reactive/dynamic forms we need to import `'ReactiveFormsModule'` which provides bunch of classes/directives/utilities `(FormGroup \u0026 FormControl)` necessary to build reactive/dynamic \n\n4.1. 3 steps involved in creating reactive form:\n---------------------\n1. Define HTML `\u003cform\u003e` in component template/view/html file\n2. Define component model in component class/.ts file `registrationForm = new FormGroup() `\n3. Use directives provided by reactive forms module to associate the model with view `\u003cform [formGroup]=\"registrationForm\"\u003e` and  `\u003cinput formControlName=\"userName\"\u003e,  \u003cinput formControlName=\"password\"\u003e`\n\n#### Lets follow belows steps to achieve reactive forms 3 main steps:\n1. We have already added html form `app.component.html` in last step\n2. Now in `app.module.ts`:\n    - import { ReactiveFormsModule } from '@angular/forms'; \u003cbr/\u003e\n    - also add to imports: [ ReactiveFormsModule ]\n3. `FormGroup` and `FormControl` are two important building blocks classes for reactive/dynamic forms\n    - In Reactive forms, the form is represented by `model in component class`, FormGroup and FormControl classes used to make that model\n    - `FormGroup` represents whole/entire form ( `form` is instance of `FormGroup` class ) \n    - `FormControl` represents each form field ( `form fields` are instance of `FormControl` class )\n    - `FormBuilder` handle form control creation, dynamic/run time field/FormControl creation\n    - `Validators` helps to setup validation on each form control\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule, \n    ReactiveFormsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component } from '@angular/core';\nimport { FormGroup, FormControl } 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 {\n\n  // create a formgroup instance\n  registrationForm = new FormGroup({\n\n    // details of objects/controls present in html\n    userName: new FormControl('Dinanath'), // defult value enter in bracket with quotes\n    password: new FormControl(''),\n    confirmPassword: new FormControl(''),\n\n  });\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cdiv class=\"container-fluid mb-5\"\u003e\n  \u003ch1\u003eRegistration Form\u003c/h1\u003e\n  \u003chr /\u003e\n\n  {{ registrationForm.value | json }}\n\n  \u003chr /\u003e\n\n  \u003c!-- associate the model with view --\u003e\n  \u003cform [formGroup]=\"registrationForm\"\u003e\n\n    \u003c!-- user name --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n        \u003cinput formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003ePassword:\u003c/label\u003e\n        \u003cinput formControlName=\"password\" type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- confirm password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003eConfirm Password:\u003c/label\u003e\n        \u003cinput formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- register button --\u003e\n    \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eRegister\u003c/button\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/04-01-01-form-value-object.png\" alt=\"Form Model, FormControl/FormGroup - defualt values\" title=\"Form Model, FormControl/FormGroup - defualt values\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Form Model, FormControl/FormGroup - defualt values\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/04-01-02-form-value-object.png\" alt=\"Form Model, FormControl/FormGroup - updated values\" title=\"Form Model, FormControl/FormGroup - updated values\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Form Model, FormControl/FormGroup - updated values\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n5 - Nesting/Nested Form Groups \n=====================\n- Inside the main form i.e. FormGroup, We can create a other FormGroup and store smaller object properties/FormControl \n    - create `'address'` a new FormGroup with 'street, landmark, road, postal-code' as a child FormControl\n    - Under `'user details'` FormGroup create a username, gender, age, etc. as a child FormControl\n- In larger/complex forms such approach of creating Nested Form Groups will help to easily manage smaller chunks/sections\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\n// create a formgroup instance\nregistrationForm = new FormGroup({\n\n  // details of objects/controls present in html\n  userName: new FormControl('Dinanath'), // defult value enter in bracket with quotes\n  password: new FormControl(''),\n  confirmPassword: new FormControl(''),\n\n  // sub/nested formgroup\n  address: new FormGroup({\n      city: new FormControl('Mumbai'),\n      state: new FormControl('Maharashtra'),\n      postalcode: new FormControl(400001)\n  })\n\n});\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cdiv class=\"container-fluid mb-5\"\u003e\n  \u003ch1\u003eRegistration Form\u003c/h1\u003e\n  \u003chr /\u003e\n\n  \u003cspan class=\"lead\"\u003e\u003cstrong\u003eForms/FormGroup Values : registrationForm.value :\u003c/strong\u003e\u003c/span\u003e {{ registrationForm.value | json }} \n\n  \u003chr /\u003e\n\n  \u003c!-- associate the model with view --\u003e\n  \u003cform [formGroup]=\"registrationForm\"\u003e\n\n  \u003c!-- user name --\u003e\n  \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n      \u003cinput formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- password --\u003e\n  \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003ePassword:\u003c/label\u003e\n      \u003cinput formControlName=\"password\" type=\"password\" class=\"form-control\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- confirm password --\u003e\n  \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eConfirm Password:\u003c/label\u003e\n      \u003cinput formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\"\u003e\n  \u003c/div\u003e\n\n  \u003chr /\u003e\n\n  \u003ch3\u003eformGroupName=\"address: Nested FormGroup with child properties \u003c/h3\u003e\n\n  \u003cdiv formGroupName=\"address\"\u003e\n\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eCity:\u003c/label\u003e\n      \u003cinput formControlName=\"city\" type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003eState:\u003c/label\u003e\n      \u003cinput formControlName=\"state\" type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"form-group\"\u003e\n      \u003clabel for=\"\"\u003ePostal Code:\u003c/label\u003e\n      \u003cinput formControlName=\"postalcode\" type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\n  \u003chr /\u003e \n\n  \u003c!-- register button --\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eRegister\u003c/button\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/05-01-01-form-nested-form-group.png\" alt=\"Reactive Form - nested FormGroup\" title=\"Reactive Form - nested FormGroup\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - nested FormGroup\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n6 - Managing Control Values with SetValue() \u0026 PatchValue()\n=====================\n- Lets learn how to set FormControl values without any user interaction (set values programatically)\n- We can retrieve back-end data by an API/service and set/update the values of FormControl with `'setValue()'` and `'PatchValue()'` method\n- **`setValue()`** method works on FormGroup as well as FormControl class, But it accepts exact object structure which matches FormGroup with exact keys as FormControl, no custom deletion or addition of keys/properties allowed (will get an error). setValue is very strict with maintaining the structure of FormGroup - we must provide all FormControl values - we have to fill up/set the value of all the fields\n- **`patchValue`** method works on FormGroup as well as FormControl class, it accepts any fields - we can provide/pass value of any required field/few of the fields - we can fill up/set the value of only required fields\n- app.component.html: Create a button and kn app.component.ts: define methods:\n  - `\u003cbutton class=\"btn btn-success ml-4\" (click)=\"loadApiDataSetValue()\"\u003eLoad API Data \u003cbr/\u003e SetValue() \u003c/button\u003e`\n  - `\u003cbutton class=\"btn btn-secondary ml-4\" (click)=\"loadApiDataPatchValue()\"\u003eLoad API Data \u003cbr\u003e PatchValue() \u003c/button\u003e`\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component } from '@angular/core';\nimport { FormGroup, FormControl } 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 {\n\n  // create a formgroup instance\n  registrationForm = new FormGroup({\n\n    // details of objects/controls present in html\n    userName: new FormControl('Dinanath'), // defult value enter in bracket with quotes\n    password: new FormControl(''),\n    confirmPassword: new FormControl(''),\n\n    // sub/nested formgroup\n    address: new FormGroup({\n      city: new FormControl('Mumbai'),\n      state: new FormControl('Maharashtra'),\n      postalcode: new FormControl(400001)\n    })\n\n  });\n\n  loadApiDataSetValue() {\n    console.log('loadApiDataSetValue ');\n    \n    The// setValue method works on FormGroup as well as FormControl class, But it accepts exact object structure which matches FormGroup with exact keys as FormControl, no custom deletion or addition of keys/properties allowed (will get an error). setValue is very strict with maintaining the structure of FormGroup - we must provide all FormControl values - we have to fill up/set the value of all the fields\n\n    this.registrationForm.setValue({\n      userName: 'Angular',\n      password: 'Angular6', //error - password field required to match FormGroup\n      confirmPassword: 'Angular6',\n\n      address: {\n        city: 'Google',\n        state: 'Google Corp',\n        postalcode: 12345,\n      }\n    })\n  }\n\n  loadApiDataPatchValue() {\n    console.log('loadApiDataPatchValue ');\n    \n    // patch value method works on FormGroup as well as FormControl class, it accepts any fields - we can provide/pass the value of any required field/few of the fields - we can fill up/set the value of only required fields\n\n    this.registrationForm.patchValue({\n      // userName: 'React',\n      // password: 'React2',\n      // confirmPassword: 'React2',\n\n      address: {\n        city: 'Facebook',\n        state: 'Facebook Corp',\n        postalcode: 678901,\n      }\n    })\n  }\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cdiv class=\"container-fluid mb-5\"\u003e\n    \u003ch1\u003eRegistration Form\u003c/h1\u003e\n    \u003chr /\u003e\n    \n    \u003cspan class=\"lead\"\u003e\u003cstrong\u003eForms/FormGroup Values : registrationForm.value :\u003c/strong\u003e\u003c/span\u003e {{ registrationForm.value | json }} \n\n    \u003chr /\u003e\n    \n    \u003c!-- associate the model with view --\u003e\n    \u003cform [formGroup]=\"registrationForm\"\u003e\n\n    \u003c!-- user name --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n        \u003cinput formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003ePassword:\u003c/label\u003e\n        \u003cinput formControlName=\"password\" type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003c!-- confirm password --\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"\"\u003eConfirm Password:\u003c/label\u003e\n        \u003cinput formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n    \u003chr /\u003e\n\n    \u003ch3\u003eformGroupName=\"address: Nested FormGroup with child properties \u003c/h3\u003e\n\n    \u003cdiv formGroupName=\"address\"\u003e\n\n      \u003cdiv class=\"form-group\"\u003e\n          \u003clabel for=\"\"\u003eCity:\u003c/label\u003e\n          \u003cinput formControlName=\"city\" type=\"text\" class=\"form-control\"\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"form-group\"\u003e\n          \u003clabel for=\"\"\u003eState:\u003c/label\u003e\n          \u003cinput formControlName=\"state\" type=\"text\" class=\"form-control\"\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"form-group\"\u003e\n          \u003clabel for=\"\"\u003ePostal Code:\u003c/label\u003e\n          \u003cinput formControlName=\"postalcode\" type=\"text\" class=\"form-control\"\u003e\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n    \u003chr /\u003e \n\n    \u003c!-- register button --\u003e\n    \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eRegister\u003c/button\u003e\n\n    \u003cbutton class=\"btn btn-success ml-4\" (click)=\"loadApiDataSetValue()\"\u003eLoad API Data \u003cbr/\u003e SetValue()\n    \u003c/button\u003e\n\n    \u003cbutton class=\"btn btn-secondary ml-4\" (click)=\"loadApiDataPatchValue()\"\u003eLoad API Data \u003cbr/\u003e PatchValue()\n    \u003c/button\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n```\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/06-01-01-form-setvalue.png\" alt=\"Reactive Form - setValue() method\" title=\"Reactive Form - setValue() method\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - setValue() method\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/06-01-02-form-setvalue-error.png\" alt=\"Reactive Form - setValue() method - error\" title=\"Reactive Form - setValue() method - error\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - setValue() method - error\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/06-01-03-form-patchvalue.png\" alt=\"Reactive Form - patchValue() method\" title=\"Reactive Form - patchValue() method\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - patchValue() method\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\n7 - FormBuilder Service\n=====================\n- Creating multiple instances of FormControl classes (name/password/email/address fields) manually is pretty time consuming and repetitive\n- `FormBuilder` service provides/consists of methods to handle/generate FormControls dynamically with lesser code\n- `FormBuilder` is an alternate simpler service to create FormGroup and FormControls\n- Instead of FormGroup and FormControl import FormBuilder service and inject in the constructor\n- Comment all old properties related to FormGroup and FormControl and create new with FormBuilder instance \n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\n// import { FormGroup, FormControl } from '@angular/forms';\nimport { FormBuilder } from '@angular/forms';\n\nconstructor(private fb: FormBuilder) { }\n\n  /* // create a formgroup instance\n  registrationForm = new FormGroup({\n\n    // details of objects/controls present in html\n    userName: new FormControl('Dinanath'), // defult value enter in bracket with quotes\n    password: new FormControl(''),\n    confirmPassword: new FormControl(''),\n\n    // sub/nested formgroup\n    address: new FormGroup({\n      city: new FormControl('Mumbai'),\n      state: new FormControl('Maharashtra'),\n      postalcode: new FormControl(400001)\n    })\n\n  }); */\n\n  // create a FormBuilder instance\n  registrationForm = this.fb.group({\n    userName: ['Dinanath Test Name with Form Builder'],\n    password: [''],\n    confirmPassword: [''],\n    address: this.fb.group({\n      city: ['Mumbai'],\n      state: ['Maharashtra'],\n      postalcode: [400001]\n    })\n  })\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/07-01-01-formbuilder.png\" alt=\"Reactive Form - FormBuilder\" title=\"Reactive Form - FormBuilder\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - FormBuilder\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n8 - Implementing simple Validation\n=====================\nFor common use cases (validation purpose) Reactive forms uses set of `validators functions in class file only`, not in html/view/template\n\n8.1 Steps to apply reactive forms validations:\n---------------------\n1. Apply validation rules to form control - use `validators class`\n    - import Validators Class - `import { FormBuilder, Validators } from '@angular/forms';`\n    - add validators to form control item -  `userName: ['Dinanath', Validators.required],`\n2. Provide a visual feedback for validations\n    - use class binding to show red border when form control/field is invalid - `\u003cinput [class.is-invalid]=\"registrationForm.get('userName').invalid \u0026\u0026 registrationForm.get('userName').touched\" formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e`\n3. Display a appropriate error message for validation\n    - `\u003csmall class=\"text-danger\" [class.d-none]=\"registrationForm.get('userName').valid ||                                                    registrationForm.get('userName').untouched\"\u003e* Name is required\u003c/small\u003e`\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { FormBuilder, Validators } from '@angular/forms';\n\n// create a FormBuilder instance\nregistrationForm = this.fb.group({\n  userName: ['Dinanath', Validators.required],\n  password: [''],\n  confirmPassword: [''],\n  address: this.fb.group({\n    city: ['Mumbai'],\n    state: ['Maharashtra'],\n    postalcode: [400001]\n  })\n})\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- user name --\u003e\n\u003cdiv class=\"form-group\"\u003e\n  \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n  \u003c!-- class binding to show red border when form control/field is invalid --\u003e\n  \u003cinput [class.is-invalid]=\"registrationForm.get('userName').invalid \u0026\u0026 registrationForm.get('userName').touched\" formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e\n  \u003c!-- single error with a class binding --\u003e\n  \u003csmall class=\"text-danger\" [class.d-none]=\"registrationForm.get('userName').valid ||                                                    registrationForm.get('userName').untouched\"\u003e* Name is required\u003c/small\u003e\n\u003c/div\u003e\n```\n\n8.2 Multiple validation rules:\n---------------------\n- To apply more than one validation rules, convert Validators to an array - ` userName: ['Dinanath', [Validators.required, Validators.minLength(3)]],`\n- With `*ngIf` directive show conditioinal error messages\n\n#### Best practice to access formControl with Getter (keep the code short \u0026 simple)\n- Create `getter method` to return individual form control and use it in HTML file\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\n// getter for userName control/field to keep code short in html file\nget userNameControl(){\n    return this.registrationForm.get('userName');\n}\n\n// create a FormBuilder instance\nregistrationForm = this.fb.group({\n  userName: ['Dinanath', [Validators.required, Validators.minLength(3)]],\n  password: [''],\n  confirmPassword: [''],\n  address: this.fb.group({\n      city: ['Mumbai'],\n      state: ['Maharashtra'],\n      postalcode: [400001]\n  })\n})\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- user name --\u003e\n\u003cdiv class=\"form-group\"\u003e\n  \u003clabel for=\"\"\u003eUsername:\u003c/label\u003e\n  \u003c!-- class binding to show red border when form control/field is invalid --\u003e\n  \u003c!-- use getter method for userName control/field to keep code short in html file --\u003e\n  \u003cinput [class.is-invalid]=\"userNameControl.invalid \u0026\u0026 \n                          userNameControl.touched\" formControlName=\"userName\" type=\"text\" class=\"form-control\"\u003e\n  \u003c!-- single error with a class binding --\u003e\n  \u003c!-- \u003csmall class=\"text-danger\" [class.d-none]=\"userNameControl.valid ||                                                    userNameControl.untouched\"\u003e* Name is required\u003c/small\u003e --\u003e\n\n  \u003c!-- group or multiple error messages : error property --\u003e\n  \u003cdiv *ngIf=\"userNameControl.invalid \u0026\u0026 userNameControl.touched\"\u003e\n      \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.required\"\u003e* Name is required\u003c/small\u003e\n      \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.minlength\"\u003e* Name must be 3 characters\u003c/small\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/08-01-01-validators-required.png\" alt=\"Reactive Form - Validators.required\" title=\"Reactive Form - Validators.required\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Validators.required\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/08-01-02-validators-required-text-error.png\" alt=\"Reactive Form - Validators.required - show error text\" title=\"Reactive Form - Validators.required - show error text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Validators.required - show error text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/08-01-03-validators-minlength.png\" alt=\"Reactive Form - Validators.minlength\" title=\"Reactive Form - Validators.minlength\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Validators.minlength\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/08-01-04-validators-minlength-error.png\" alt=\"Reactive Form - Validators.minlength - show error text\" title=\"Reactive Form - Validators.minlength - show error text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Validators.minlength - show error text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n9 - Custom Validation\n=====================\n- Some times `in-built validators` not match with the exact scenario/requirements\n- We can create custom validators for such scenarios like some keywords (spam words) not allowed in user name field, etc.\n- Usually custom validators are used through-out the application so its advisable to create custom validators (function class) in an external class file and share\n- create folder: `'app/shared/validators'` and inside this folder create a file named: `'user-name.validator.ts'`\n  - create a validator function\n- Lets use/import newly created custom validator `'user-name.validator.ts'` in `app.component.ts`\n  - `import { userNameValidator } from './shared/validators/user-name.validators';` \u003cbr/\u003e\n    ` userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],`\n- Add an error message realted to custom validator in view \n    - ` \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.validateUserNameError\"\u003e* '{{userNameControl.errors?.validateUserNameError.value}}' user name not allowed\u003c/small\u003e`\n\n\u003e **Syntax \u0026 Example**: user-name.validators.ts\n```typescript\nimport { AbstractControl } from \"@angular/forms\";\n\n// create a validator function to avoid junk/spam names like `admin`\n// it returns `string message` or null\nexport function userNameValidator(control: AbstractControl): { [key: string]: any } | null {\n    const isUserNameCorrect = /junk/.test(control.value);\n    return isUserNameCorrect ? { 'validateUserName': { value: control.value } } : null;\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { userNameValidator } from './shared/validators/user-name.validators';\n\n// create a FormBuilder instance\nregistrationForm = this.fb.group({\n    userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],\n    password: [''],\n    confirmPassword: [''],\n    address: this.fb.group({\n      city: ['Mumbai'],\n      state: ['Maharashtra'],\n      postalcode: [400001]\n    })\n})\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- group or multiple error messages : error property --\u003e\n\u003cdiv *ngIf=\"userNameControl.invalid \u0026\u0026 userNameControl.touched\"\u003e\n    \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.required\"\u003e* Name is required\u003c/small\u003e\n    \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.minlength\"\u003e* Name must be 3 characters\u003c/small\u003e\n    \u003csmall class=\"text-danger\" *ngIf=\"userNameControl.errors?.validateUserNameError\"\u003e* '{{userNameControl.errors?.validateUserNameError.value}}' user name not allowed\u003c/small\u003e\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/09-01-01-custom-validator-project-structure.png\" alt=\"Reactive Form - custom validators\" title=\"Reactive Form - custom validators\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - custom validators\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/09-01-02-custom-validator-error.png\" alt=\"Reactive Form - custom validators - error text\" title=\"Reactive Form - custom validators - error text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - custom validators - error text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n10 - Cross Field Validation\n=====================\n- Sometimes we need to validate values across multiple fields like 'password \u0026 confirm password', 'card number', 'verification of pin number' etc.\n- Lets create a custom validator to match 'password \u0026 confirm password' fields\n- In folder: `'app/shared/validators'` create a file named: `'password.validator.ts'`\n- Apply custom password validator to formgroup-the main form (not to password formControl)\n\n\u003e **Syntax \u0026 Example**: password.validator.ts\n```typescript\nimport { AbstractControl } from \"@angular/forms\";\n\n// create a validator function to match password and confirm password field\n// it returns `boolean` or null\nexport function passwordValidator(control: AbstractControl): { [key: string]: boolean } | null {\n    const passwordControl = control.get('password');\n    const confirmPasswordControl = control.get('confirmPassword');\n\n    if (passwordControl.pristine \u0026\u0026 confirmPasswordControl.pristine || passwordControl.untouched \u0026\u0026 confirmPasswordControl.untouched) {\n      return null;\n    }\n\n    return passwordControl \u0026\u0026 confirmPasswordControl \u0026\u0026 passwordControl.value != confirmPasswordControl.value ? { 'misMatchError': true } : null;\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { passwordValidator } from './shared/validators/password.validator';\n\n// create a FormBuilder instance\nregistrationForm = this.fb.group({\n    userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],\n    password: [''],\n    confirmPassword: [''],\n    address: this.fb.group({\n      city: ['Mumbai'],\n      state: ['Maharashtra'],\n      postalcode: [400001]\n    })\n}, {validator: passwordValidator})\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- confirm password --\u003e\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"\"\u003eConfirm Password:\u003c/label\u003e\n    \n    \u003c!-- class binding to show red border when form control/field is invalid --\u003e\n    \u003cinput [class.is-invalid]=\"registrationForm.errors?.passwordMisMatchError\" formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\"\u003e\n    \n    \u003c!-- single error with a class binding --\u003e\n    \u003csmall class=\"text-danger\" *ngIf=\"registrationForm.errors?.passwordMisMatchError\"\u003eConfirm Password not matched!\u003c/small\u003e\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/10-01-01-custom-cross-field-validator-error.png\" alt=\"Reactive Form - custom validators  - cross field - error text\" title=\"Reactive Form - custom validators - cross field - error text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - custom validators - cross field - error text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n11 - Conditional Dynamic Validation\n=====================\n- Sometimes we need to apply dynamic validation like after certain action/thing/condition, validations should come in to the picture\n- Example: After subscribe checkbox selection -\u003e email field mendatory, \n- Create `email text field` and `subscption checkbox field` in form\n- We need to track value of checkbox and conditionaly set status of email field\n  - `valueChanges` property helps to track the current value of any controls as a observables\n  - `setValidators` methods - set desired validators to formControl/field\n  - `clearValidators` methods - clears validators from formControl/field\n- Finally we need to invoke/call `updateValueAndValidity` method to reflect latest status\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- email --\u003e\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"\"\u003eEmail:\u003c/label\u003e\n\n    \u003c!-- class binding to show red border when form control/field is invalid --\u003e\n    \u003cinput [class.is-invalid]=\"emailControl.invalid \u0026\u0026 \n    emailControl.touched\" formControlName=\"email\" type=\"text\" class=\"form-control\"\u003e\n    \n    \u003c!-- single error with a class binding --\u003e\n    \u003csmall class=\"text-danger\" [class.d-none]=\"emailControl.valid || emailControl.untouched\"\u003e* Email is required\u003c/small\u003e\n\u003c/div\u003e\n\n\u003c!-- subscribe checkbox --\u003e\n\u003cdiv class=\"form-check mb-3\"\u003e\n    \u003cinput formControlName=\"subscribe\" type=\"checkbox\" class=\"form-check-input\"\u003e\n    \u003clabel for=\"\" class=\"form-check-label\"\u003eSubscribe/Send me promotion offers\u003c/label\u003e\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n// import { FormGroup, FormControl } from '@angular/forms';\nimport { FormBuilder, Validators, FormGroup } from '@angular/forms';\nimport { userNameValidator } from './shared/validators/user-name.validators';\nimport { passwordValidator } from './shared/validators/password.validator';\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\n  registrationForm: FormGroup;\n\n  // getter for userName field to keep code short in html file\n  get userNameControl(){\n    return this.registrationForm.get('userName');\n  }\n\n  // getter for email control/field to keep code short in html file\n  get emailControl(){\n    return this.registrationForm.get('email');\n  }\n\n  constructor(private fb: FormBuilder) { }\n\n  ngOnInit() {\n    // create a FormBuilder instance\n    this.registrationForm = this.fb.group({\n      userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],\n      email:[''],\n      subscribe:[false],\n      password: [''],\n      confirmPassword: [''],\n      address: this.fb.group({\n        city: ['Mumbai'],\n        state: ['Maharashtra'],\n        postalcode: [400001]\n      })\n    }, {validator: passwordValidator});\n\n    // subscribe checkbox\n    this.registrationForm.get('subscribe').valueChanges\n      .subscribe(subscribeCheckedValue =\u003e {\n        const email =  this.registrationForm.get('email');\n\n        // email field set/unset `required` validators\n        if(subscribeCheckedValue){\n          email.setValidators(Validators.required);\n        } else {\n          email.clearValidators();\n        }\n\n        // to reflect latest correct status\n        email.updateValueAndValidity();\n\n      })\n  }\n\n  loadApiDataSetValue() {\n    console.log('loadApiDataSetValue ');\n\n    this.registrationForm.setValue({\n      userName: 'Angular',\n      password: 'Angular6',\n      confirmPassword: 'Angular6',\n\n      address: {\n        city: 'Google',\n        state: 'Google Corp',\n        postalcode: 12345,\n      }\n    })\n  }\n\n  loadApiDataPatchValue() {\n    console.log('loadApiDataPatchValue ');\n\n    this.registrationForm.patchValue({\n      // userName: 'React',\n      // password: 'React2',\n      // confirmPassword: 'React2',\n\n      address: {\n        city: 'Facebook',\n        state: 'Facebook Corp',\n        postalcode: 678901,\n      }\n    })\n  }\n\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/11-01-01-conditional-validator-error.png\" alt=\"Reactive Form - custom validators - conditional/hierarchy field - error text\" title=\"Reactive Form - custom validators - conditional/hierarchy field - error text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - custom validators - conditional/hierarchy field - error text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/11-01-02-conditional-validator-success.png\" alt=\"Reactive Form - custom validators - conditional/hierarchy field - success\" title=\"Reactive Form - custom validators - conditional/hierarchy field - success\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - custom validators - conditional/hierarchy field - success\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\n12 - Dynamic Form Controls\n======================\n- In some scenarios, we need to add fields/records on the fly like click on `Add Patient` button to add new patients record and so on, provide alternate email, contact details, etc.\n- The method of adding new fields at run-time keeps form concise and expand only when necessary\n- `FormArray` class helps to maintain and duplicate dynamic list of controls\n    - import { FormBuilder, Validators, FormGroup, FormArray } from '@angular/forms';\n- Define `FormArray` in 'formModel'\n    - alternateEmailAddresses:this.fb.array([])\n- Create `getter method` to return individual form control and use/access easily it in HTML file\n- Create a method to dynamically insert controls to FormArray\n- In view create a button `Add alternate Email` to invoke a method to add/push dynamic controls\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n// import { FormGroup, FormControl } from '@angular/forms';\nimport { FormBuilder, Validators, FormGroup, FormArray } from '@angular/forms';\nimport { userNameValidator } from './shared/validators/user-name.validators';\nimport { passwordValidator } from './shared/validators/password.validator';\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\n  registrationForm: FormGroup;\n\n  // getter for userName field to keep code short in html file\n  get userNameControl(){\n    return this.registrationForm.get('userName');\n  }\n\n  // getter for email control/field to keep code short in html file\n  get emailControl(){\n    return this.registrationForm.get('email');\n  }\n\n  // getter for email control/field to keep code short in html file\n  get alternateEmailAddressesControl(){\n    return this.registrationForm.get('alternateEmailAddresses') as FormArray\n  }\n\n  addAlternateEmailAddresses() {\n    return this.alternateEmailAddressesControl.push(this.fb.control(''));\n  }\n\n  constructor(private fb: FormBuilder) { }\n\n  ngOnInit() {\n    // create a FormBuilder instance\n    this.registrationForm = this.fb.group({\n      userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],\n      email:[''],\n      subscribe:[false],\n      password: [''],\n      confirmPassword: [''],\n      address: this.fb.group({\n        city: ['Mumbai'],\n        state: ['Maharashtra'],\n        postalcode: [400001]\n      }),\n      alternateEmailAddresses:this.fb.array([])\n    }, {validator: passwordValidator});\n\n    // subscribe checkbox\n    this.registrationForm.get('subscribe').valueChanges\n      .subscribe(subscribeCheckedValue =\u003e {\n        const email =  this.registrationForm.get('email');\n\n        // email field set/unset `required` validators\n        if(subscribeCheckedValue){\n          email.setValidators(Validators.required);\n        } else {\n          email.clearValidators();\n        }\n\n        // to reflect latest correct status\n        email.updateValueAndValidity();\n\n      })\n  }\n\n  loadApiDataSetValue() {\n    console.log('loadApiDataSetValue ');\n\n    this.registrationForm.setValue({\n      userName: 'Angular',\n      password: 'Angular6',\n      confirmPassword: 'Angular6',\n\n      address: {\n        city: 'Google',\n        state: 'Google Corp',\n        postalcode: 12345,\n      }\n    })\n  }\n\n  loadApiDataPatchValue() {\n    console.log('loadApiDataPatchValue ');\n\n    this.registrationForm.patchValue({\n      // userName: 'React',\n      // password: 'React2',\n      // confirmPassword: 'React2',\n\n      address: {\n        city: 'Facebook',\n        state: 'Facebook Corp',\n        postalcode: 678901,\n      }\n    })\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- email --\u003e\n\u003cdiv class=\"form-group\"\u003e\n  \u003clabel for=\"\"\u003eEmail:\u003c/label\u003e\n\n  \u003cbutton type=\"button \"class=\"btn btn-secondary btn-sm m-2\" (click)=\"addAlternateEmailAddresses(); $event.preventDefault()\"\u003eAdd alternet Email\u003c/button\u003e\n\n  \u003c!-- class binding to show red border when form control/field is invalid --\u003e\n  \u003cinput [class.is-invalid]=\"emailControl.invalid \u0026\u0026 \n  emailControl.touched\" formControlName=\"email\" type=\"text\" class=\"form-control\"\u003e\n  \n  \u003c!-- single error with a class binding --\u003e\n  \u003csmall class=\"text-danger\" [class.d-none]=\"emailControl.valid || emailControl.untouched\"\u003e* Email is required\u003c/small\u003e\n\n  \u003c!-- dynamic emaiil fields to add--\u003e\n  \u003cdiv formArrayName=\"alternateEmailAddresses\" *ngFor=\"let email of alternateEmailAddressesControl.controls; let i=index\"\u003e\n  \u003cinput type=\"text\" class=\"form-control my-2\" [formControlName]=\"i\"\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/12-01-01-dynamic-form-control.png\" alt=\"Reactive Form - add dynamic email field/control\" title=\"Reactive Form - add dynamic email field/control\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - add dynamic email field/control\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\n13 - Submitting Form Data\n======================\n1. Use `'novalidate'` attribute to form tag to avoid/prevent browser `default validations` when will click on 'SUBMIT' button.\n2. Bind `'ngSubmit'` event to the form tag which will trigger on 'SUBMIT' button\n    - ```\u003cform [formGroup]=\"registrationForm\" (ngSubmit)=\"onSubmit()\"\u003e```\n3. Define `onSubmit()` event handler in `app.component.ts` class file\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cform [formGroup]=\"registrationForm\" novalidate (ngSubmit)=\"onSubmit()\"\u003e\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\n// handler for submit button\nonSubmit() {\n  console.log('submit button clicked');\n  console.log(this.registrationForm.value);\n}\n```\n\n4. To send data to the server we need to create/use `'registration service'` with angular CLI by using the command: `ng generate service registration` or `ng g s registration`  \n    - `registration.service.ts:`\n      - Import HttpClient module: import { HttpClient } from '@angular/common/http';\n      - Invoke HttpClient in constructor as a local variable / Dependency injection:  \u003cbr/\u003e\n      constructor(public _httpClient:HttpClient) { }\n5. `app.module.ts: `\n    - import HttpClientModule: import { HttpClientModule } from '@angular/common/http'; \n    - add to the imports array: \u003cbr/\u003e\n    imports: [\n      BrowserModule, \n      FormsModule,\n      HttpClientModule\n    ],\n6. `registration.service.ts:` \n    - // create a variable which hold path to which will post the date \u003cbr/\u003e\n     _url = 'http://localhost:3000/enroll';\n    - // create a method called register which will post the data to server\n    register(userData) {\n        return this._httpClient.post`\u003cany\u003e`(this._url, userData);\n    }\n7. `app.component.ts: `\n    - The Post request will return response as an `observable`, so we need to subscribe to observables in app.component.ts\n    - Import registration service: import { RegistrationService } from './registration.service';\n    - Invoke in constructor as a local variable / Dependency injection: \u003cbr/\u003e \n    constructor(public registrationService:RegistrationService) { }\n    - On submit button clicked i.e. in onSubmit() method subscribe to the observables: \u003cbr/\u003e \n    // handler for submit button\n    onSubmit() {\n      console.log('submit button clicked');\n      console.log(this.registrationForm.value);\n\n      this.registrationService.register(this.registrationForm.value)\n      .subscribe(\n        response =\u003e console.log('Success', response),\n        error =\u003e console.log('Error', error)\n      )\n    }\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { HttpClientModule } from '@angular/common/http'; \n\nimport { AppComponent } from './app.component';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormBuilderComponent } from './components/form-builder/form-builder.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    FormBuilderComponent\n  ],\n  imports: [\n    BrowserModule, \n    ReactiveFormsModule,\n    HttpClientModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n\u003e **Syntax \u0026 Example**: registration.service.ts\n```typescript\nimport { Injectable } from '@angular/core';\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\n\n// to catch error\nimport { catchError } from 'rxjs/operators';\nimport { throwError } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class RegistrationService {\n  // create a variable which holds the path to which will post the date\n  _url = 'http://localhost:3000/enroll';\n\n  constructor(public _httpClient: HttpClient ) { }\n\n  // create a method called enroll which will post the data to server\n  register(userData) {\n  return this._httpClient.post\u003cany\u003e(this._url, userData)\n    .pipe(catchError(this.errorHandler)) //catch errors\n  }\n\n  errorHandler(error: HttpErrorResponse) {\n    return throwError(error);\n  }\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n// import { FormGroup, FormControl } from '@angular/forms';\nimport { FormBuilder, Validators, FormGroup, FormArray } from '@angular/forms';\nimport { userNameValidator } from './shared/validators/user-name.validators';\nimport { passwordValidator } from './shared/validators/password.validator';\nimport { RegistrationService } from './registration.service';\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\n  registrationForm: FormGroup;\n\n  // getter for userName field to keep code short in html file\n  get userNameControl() {\n    return this.registrationForm.get('userName');\n  }\n\n  // getter for email control/field to keep code short in html file\n  get emailControl() {\n    return this.registrationForm.get('email');\n  }\n\n  // getter for email control/field to keep code short in html file\n  get alternateEmailAddressesControl() {\n    return this.registrationForm.get('alternateEmailAddresses') as FormArray\n  }\n\n  addAlternateEmailAddresses() {\n    return this.alternateEmailAddressesControl.push(this.fb.control(''));\n  }\n\n  // create a new data member/property to bind to the view\n  errorMessage = '';\n\n  // to check form submitted or not\n  isFormSubmitted = false;\n\n  constructor(private fb: FormBuilder, public registrationService: RegistrationService) { }\n\n  ngOnInit() {\n  // create a FormBuilder instance\n  this.registrationForm = this.fb.group({\n    userName: ['Dinanath', [Validators.required, Validators.minLength(3), userNameValidator]],\n    email: [''],\n    subscribe: [false],\n    password: [''],\n    confirmPassword: [''],\n    address: this.fb.group({\n    city: ['Mumbai'],\n    state: ['Maharashtra'],\n    postalcode: [400001]\n    }),\n    alternateEmailAddresses: this.fb.array([])\n  }, { validator: passwordValidator });\n\n  // subscribe checkbox\n  this.registrationForm.get('subscribe').valueChanges\n    .subscribe(subscribeCheckedValue =\u003e {\n      const email = this.registrationForm.get('email');\n\n      // email field set/unset `required` validators\n      if (subscribeCheckedValue) {\n        email.setValidators(Validators.required);\n      } else {\n        email.clearValidators();\n      }\n\n      // to reflect latest correct status\n      email.updateValueAndValidity();\n\n    })\n  }\n\n  loadApiDataSetValue() {\n  console.log('loadApiDataSetValue ');\n\n    this.registrationForm.setValue({\n      userName: 'Angular',\n      password: 'Angular6',\n      confirmPassword: 'Angular6',\n\n      address: {\n      city: 'Google',\n      state: 'Google Corp',\n      postalcode: 12345,\n      }\n    })\n  }\n\n  loadApiDataPatchValue() {\n    console.log('loadApiDataPatchValue ');\n\n    this.registrationForm.patchValue({\n      // userName: 'React',\n      // password: 'React2',\n      // confirmPassword: 'React2',\n\n      address: {\n        city: 'Facebook',\n        state: 'Facebook Corp',\n        postalcode: 678901,\n      }\n    })\n  }\n\n  // handler for submit button\n  onSubmit() {\n    console.log('submit button clicked');\n    console.log(this.registrationForm.value);\n    this. isFormSubmitted = true;\n    this.registrationService.register(this.registrationForm.value)\n    .subscribe(\n      response =\u003e console.log('Success', response),\n      // error =\u003e console.log('Error', error)\n\n      // store error in data member / property to bind to the view\n      error =\u003e this.errorMessage = error.statusText\n    )\n  }\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/13-01-01-submit-form-data.png\" alt=\"Reactive Form - Submit Form data\" title=\"Reactive Form - Submit Form data\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Submit Form data\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n14 - Express Server to Receive Form Data\n=====================\n1. At the root, besides the angular application folder create a new siblings folder named `'server'` which consists of server-side code\n2. Run the command: `npm init --yes` to create a `package.json` also bypass-surpass the questions with default answers (without giving answers to questions)\n3. Install express and other dependencies with the command: \u003cbr/\u003e\n    `npm install --save express body-parser cors` \u003cbr/\u003e\n```\n\"dependencies\": {\n    \"body-parser\": \"^1.18.3\", - middleware to handle form data\n    \"cors\": \"^2.8.4\", - helps to make request through multiple ports/servers - cross origin resource sharing\n    \"express\": \"^4.16.3\" - web server\n}\n```\n\n4. Inside a `server` folder create a new file named `'server.js'`\n5. at command prompt/terminal run command: `node server` - will get output in terminal as 'Server running on localhost port:  3000'\n6. in browser type path: `'http://localhost:3000/'` - output - 'Hello from the server!'\n7. add an endpoint in server.js to which angular application will post data\n// add endpoint\napp.post('/enroll', function(req,res){\n    // req.body - contains user data send by the angular\n    console.log(req.body);\n    // send response\n    res.status(200).send({'message': 'Data received'});\n})\n8. insert/add endpoint path to angular url variable in 'enrollment.service.ts'\n    _url = 'http://localhost:3000/enroll';\n9. restart the node server by command: `node server`\n10. In angular application click on the submit button and check `inspect element` console as well as node console will get the message and user data as an output. for better usability its advisable to hide actual form/hide submit button / disable submit button etc. to avoid the extra click on submit button.\n\n\u003e **Syntax \u0026 Example**: server.ts\n```typescript\n// 1. imports/requires the packages\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst cors = require('cors');\n\n// port\nconst PORT = 3000;\n\nconst app = express();\n\n// handle the json data\napp.use(bodyParser.json());\n\napp.use(cors());\n\n// test/check get request\napp.get('/',function(req, res){\n    res.send('Hello from server!');\n})\n\n// add endpoint\napp.post('/enroll', function(req,res){\n    // req.body - contains user data send by the angular\n    console.log(req.body);\n    // send response\n    res.status(200).send({'message': 'Data received'});\n\n    // to see errors \n    // res.status(401).send({'message': 'Data received'});\n})\n\n// listen to request\napp.listen(PORT, function(){\n    console.log('Server running on localhost port: ', PORT);\n})\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/14-01-01-form-submit-node.png\" alt=\"Reactive Form - Submit Form data with Node Server\" title=\"Reactive Form - Submit Form data with Node Server\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Submit Form data with Node Server\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-forms-reactivemodeldriven/14-01-02-form-node-response.png\" alt=\"Reactive Form - Submit Form data with Node Server Response\" title=\"Reactive Form - Submit Form data with Node Server Response\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Reactive Form - Submit Form data with Node Server Response\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactivemodeldriven-tutorial/lists"}