{"id":21696324,"url":"https://github.com/dinanathsj29/angular-forms-reactive-tutorial","last_synced_at":"2026-01-07T12:50:12.209Z","repository":{"id":38734682,"uuid":"194664291","full_name":"dinanathsj29/angular-forms-reactive-tutorial","owner":"dinanathsj29","description":"Lets have a quick overview of Angular's Reactive Model Driven Forms with live practical example.","archived":false,"fork":false,"pushed_at":"2023-01-01T08:45:56.000Z","size":2607,"stargazers_count":2,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T11:05:36.489Z","etag":null,"topics":["angular-forms","dynamic-forms","formbuilder","formcontrol","formcontrolname","formgroup","ngsubmit","reactive-forms","setvalidators","validators"],"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-07-01T11:59:18.000Z","updated_at":"2020-04-20T10:26:05.000Z","dependencies_parsed_at":"2022-08-29T04:51:20.042Z","dependency_job_id":null,"html_url":"https://github.com/dinanathsj29/angular-forms-reactive-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactive-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactive-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactive-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-forms-reactive-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular-forms-reactive-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246180891,"owners_count":20736459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular-forms","dynamic-forms","formbuilder","formcontrol","formcontrolname","formgroup","ngsubmit","reactive-forms","setvalidators","validators"],"created_at":"2024-11-25T19:19:29.156Z","updated_at":"2026-01-07T12:50:12.164Z","avatar_url":"https://github.com/dinanathsj29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./_images-angular-reactive-forms-tutorial/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.1. Reactive Model Driven Forms\n---------------------\nWe know that:\n- Reactive forms give the ability to control validation from the component code\n- Also, we are able to do a unit test of reactive model-driven forms\n\n1.2. Setup Angular Project\n---------------------\n1. Create a `new Angular project` with command at the console: `ng new angular-reactive-forms-tutorial`\n2. Change Directory and get inside the directory with the command: `cd angular-reactive-forms-tutorial` and check angular app folder structure\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/1-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\n3. Run/Serve/Build Angular application with the command: `ng serve` or `ng serve -o` or `ng serve --open`\n    - `-o` or `--open` flag directly launch the application into default browser (default port is `4200`)\n    - One can also change the port number by using the command: `ng serve --port 5000 -o`\n4. Go to browser and type: `http://localhost:5000` to launch an angular application\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/2-angular-default-app-launch.png\" alt=\"Angular default app launch\" title=\"Angular default app launch\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular default app launch\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.3. Constructing HTML Form structure\n=====================\n1. In `Index.html` file, in `head` element, link/import/include any front-end UI framework like `Bootstrap` or `Zurb Foundation` which helps to easily style our app/form layout\n\n\u003e **Syntax \u0026 Example**: index.html\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css\"\u003e\n\nor\n\n\u003c!-- link/import/include zurb foundation --\u003e\n\u003clink rel=\"stylesheet\" href=\"./assets/library/foundation.min.css\"\u003e\n```\n\n2. To verify the Zurb Foundation included/working properly in an application, `check the angular app in browser fonts, etc changed?`\n    - Right click on page/element and check in `inspect element` the Zurb Foundation classes and properties applied to respective elements:\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/3-zurb-foundation-framework.png\" alt=\"Zurb Foundation framework styly applied\" title=\"Zurb Foundation framework styly applied\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Zurb Foundation framework styly applied\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3. From file `app.component.html` delete all old code and add new markup to create form:\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- show this template if name property not exist or form not submitted --\u003e\n\u003cdiv *ngIf=\"!name; else formsubmitdata\"\u003e\n\n  \u003cform\u003e\n\n    \u003cdiv class=\"form-container\"\u003e\n\n      \u003cdiv class=\"row columns\"\u003e\n        \n        \u003ch1\u003eBeginners Simple Reactive Form\u003c/h1\u003e\n\n        \u003c!-- name --\u003e\n        \u003clabel\u003eName\n          \u003cinput type=\"text\" placeholder=\"Enter Name\"\u003e\n        \u003c/label\u003e\n\n        \u003c!-- description --\u003e\n        \u003clabel\u003eDescription\n          \u003ctextarea placeholder=\"Enter Description\"\u003e\u003c/textarea\u003e\n        \u003c/label\u003e\n\n        \u003c!-- checkbox --\u003e\n        \u003clabel for=\"validate\"\u003eMinimum of 5 Characters Name required\u003c/label\u003e\n        \u003cinput type=\"checkbox\" name=\"validate\" value=\"1\"\u003e ON\n\n        \u003c!-- submit button --\u003e\n        \u003cinput type=\"submit\" class=\"button expanded\" value=\"Submit Form\"\u003e\n\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n\n\u003c!-- show this template if name property exists or form submitted --\u003e\n\u003cng-template #formsubmitdata\u003e\n\n  \u003cdiv class=\"form-container\"\u003e\n\n    \u003cdiv class=\"row columns\"\u003e\n\n      \u003ch1\u003eYou Entered Name: {{ name }}\u003c/h1\u003e\n\n      \u003cp\u003eYour Description Details: {{ description }}\u003c/p\u003e\n\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n  \n\u003c/ng-template\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/4-simple-html-form.png\" alt=\"Simple HTML Form with Zurb Foundation\" title=\"Simple HTML Form with Zurb Foundation\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Simple HTML Form with Zurb Foundation\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.4. Styling HTML Form with CSS\n=====================\n- With the `Zurb Foundatio`n framework some styling applied, let us create some custom css style to make form/interface more attractive and intuative\n\n\u003e **Syntax \u0026 Example**: styles.css\n```css\n/* You can add global styles to this file, and also import other style files */\n\n/* apply google font family */\n@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei');\n\nbody {\n  background:rgba(148, 134, 93, 0.35);;\n  /* font-family: 'ZCOOL XiaoWei', serif !important; */\n}\n\n* {\n  font-family: 'ZCOOL XiaoWei', serif !important;\n}\n\n.form-container {\n  display:block;\n  width:90%;\n  padding:2em;\n  margin: 2em auto;\n  background:#fff;\n}\n\nh1 {\n  text-align: center;\n  margin-bottom: 1rem;\n  font-weight:bold;\n}\n\n.button {\n  margin-top: 1rem;\n  font-weight: bold;\n}\n\n/* error text message alert */\n.alert {\n  background: #f2dada;\n  padding: 5px;\n  font-size: .9em;\n  margin-bottom: 15px;\n  display: inline-block;\n  animation: 2s alertAnim forwards;\n}\n\n/* animation effect for error text message alert */\n@keyframes alertAnim {\n  from {\n    opacity:0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity:1;\n    transform: translateY(0);\n  }\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/5-css-styled-html-form.png\" alt=\"CSS Style applied HTML Form\" title=\"CSS Style applied HTML Form\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - CSS Style applied HTML Form\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.5. Integrating Rective Form Class\n=====================\n- To work with reactive/dynamic forms we need to import `'ReactiveFormsModule'` which provides bunch of classes/directives/utilities necessary to build reactive/dynamic forms\n\n1. In `app.module.ts`: import { ReactiveFormsModule } from '@angular/forms'; \n    - also add to imports: [ ReactiveFormsModule ]\n\n**Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\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\n1.6. Composing Component Class with ReactiveForms building blocks\n=====================\n- `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\n1. In `app.component.ts` import { FormBuilder, FormGroup, Validators } from '@angular/forms'; and write following logical code to build reactive form \n\n**Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, 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 {\n\n  simpleBegReactiveForm: FormGroup;     // form\n  formSubmitPost: any;                  // A property for our submitted form\n  name: string = '';                    // name text\n  description: string = '';             // description text\n\n  // create a FormBuilder dependecy injection\n  constructor(private fb: FormBuilder) {\n\n    // reference FormBuilder instance to control the validation of each form field\n    this.simpleBegReactiveForm = fb.group({\n      'name': ['', Validators.required],\n      'description': ['', [Validators.required, Validators.minLength(30), Validators.maxLength(100)]],\n      'validate': ''\n    });\n\n  }\n\n  // handler to submit form\n  submitFormData(formSubmitPost) {\n    this.description = formSubmitPost.description;\n    this.name = formSubmitPost.name;\n  }\n\n}\n```\n\n1.7. Update HTML Form (bind Model with View)\n=====================\n- Lets use and apply class members created in `app.component.ts` for specific field/controls and bind with form and input fields, `([formGroup]=\"simpleBegReactiveForm\", formControlName=\"name\" ...) `\n\n**Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- show this template if name property not exist or form not submitted --\u003e\n\u003cdiv *ngIf=\"!name; else formsubmitdata\"\u003e\n\n  \u003c!-- associate the model with view --\u003e\n  \u003cform [formGroup]=\"simpleBegReactiveForm\" (ngSubmit)=\"submitFormData(simpleBegReactiveForm.value)\"\u003e\n\n    \u003cdiv class=\"form-container\"\u003e\n\n      \u003cdiv class=\"row columns\"\u003e\n        \n        \u003ch1\u003eBeginners Simple Reactive Form\u003c/h1\u003e\n\n        \u003c!-- name --\u003e\n        \u003clabel\u003eName\n          \u003cinput type=\"text\" placeholder=\"Enter Name\" formControlName=\"name\"\u003e\n        \u003c/label\u003e\n\n        \u003c!-- description --\u003e\n        \u003clabel\u003eDescription\n          \u003ctextarea formControlName=\"description\"\u003e\u003c/textarea\u003e\n        \u003c/label\u003e\n\n        \u003c!-- checkbox --\u003e\n        \u003clabel for=\"validate\"\u003eMinimum of 5 Characters Name required\u003c/label\u003e\n        \u003cinput type=\"checkbox\" name=\"validate\" value=\"1\" formControlName=\"validate\" \u003e ON\n\n        \u003c!-- submit button --\u003e\n        \u003cinput type=\"submit\" class=\"button expanded\" value=\"Submit Form\" [disabled]=\"!simpleBegReactiveForm.valid\"\u003e\n\n      \u003c/div\u003e\n\n    \u003c/div\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-reactive-forms-tutorial/6-bind-model-view.png\" alt=\"Bind Model with View\" title=\"Bind Model with View\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Bind Model with View\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.8. Adding/Showing Validation Messages\n=====================\n- Now add required validation message text as a alert and use interpolation to show class member\n\n**Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- show name alert text --\u003e\n\u003cdiv class=\"alert\" *ngIf=\"!simpleBegReactiveForm.controls['name'].valid \u0026\u0026 simpleBegReactiveForm.controls['name'].touched\"\u003e{{ titleAlertText }}\u003c/div\u003e\n\n\u003c!-- show name description text --\u003e\n\u003cdiv class=\"alert\" *ngIf=\"!simpleBegReactiveForm.controls['description'].valid \u0026\u0026 simpleBegReactiveForm.controls['description'].touched\"\u003e{{ descriptionAlertText }}\u003c/div\u003e\n```\n\n**Syntax \u0026 Example**: app.component.ts\n```typescript\ntitleAlertText = 'Name field is required';\ndescriptionAlertText = 'Specify Description between 30 to 100 characters';\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/7-showing-alert-error-message.png\" alt=\"Shwoing alert error message text\" title=\"Shwoing alert error message text\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Shwoing alert error message text\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.9. Implement Dyanmic Validation with checkbox\n=====================\n- Sometimes we need to perform form validation based on user input\n- Like in current form, If checkbox is `ON` than `Name must required with 5 characters` else `any characters`\n- We need to track value of checkbox and conditionaly set status of other 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**Syntax \u0026 Example**: app.component.ts\n```typescript\nngOnInit() {\n\n  // subscribe checkbox\n  this.simpleBegReactiveForm.get('validate').valueChanges.subscribe(\n\n  (validate) =\u003e {\n\n    if (validate == '1') {\n      // name field set/unset `required` validators\n      this.simpleBegReactiveForm.get('name').setValidators([Validators.required, Validators.minLength(5)]);\n      this.titleAlertText = 'Specify Name with 5 characters';\n    } else {\n      this.simpleBegReactiveForm.get('name').setValidators(Validators.required);\n      this.titleAlertText = 'Name field is required';\n    }\n    // to reflect latest correct status\n    this.simpleBegReactiveForm.get('name').updateValueAndValidity();\n\n  });\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-reactive-forms-tutorial/8-checkbox-dynamic-validator-error.png\" alt=\"Checkbox dynamic validator error\" title=\"Checkbox dynamic validator error\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Checkbox dynamic validator 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-reactive-forms-tutorial/9-checkbox-dynamic-validator-success.png\" alt=\"Checkbox dynamic validator success\" title=\"Checkbox dynamic validator success\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Checkbox dynamic validator success\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-reactive-forms-tutorial/10-submit-data.png\" alt=\"Submit Data success screen\" title=\"Submit Data success screen\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Submit Data success screen\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.10. Final working code\n=====================\n**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\u003eAngularReactiveFormsTutorial\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\n      \u003c!-- link/import/include zurb foundation --\u003e\n      \u003clink rel=\"stylesheet\" href=\"./assets/library/foundation.min.css\"\u003e\n\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n      \u003capp-root\u003e\u003c/app-root\u003e\n    \u003c/body\u003e\n    \n  \u003c/html\u003e\n\n```\n\n**Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- show this template if name property not exist or form not submitted --\u003e\n\u003cdiv *ngIf=\"!name; else formsubmitdata\"\u003e\n\n  \u003c!-- associate the model with view --\u003e\n  \u003cform [formGroup]=\"simpleBegReactiveForm\" (ngSubmit)=\"submitFormData(simpleBegReactiveForm.value)\"\u003e\n\n    \u003cdiv class=\"form-container\"\u003e\n\n      \u003cdiv class=\"row columns\"\u003e\n        \n        \u003ch1\u003eBeginners Simple Reactive Form\u003c/h1\u003e\n\n        \u003c!-- name --\u003e\n        \u003clabel\u003eName\n          \u003cinput type=\"text\" placeholder=\"Enter Name\" formControlName=\"name\"\u003e\n        \u003c/label\u003e\n\n        \u003c!-- show name alert text --\u003e\n        \u003cdiv class=\"alert\" *ngIf=\"!simpleBegReactiveForm.controls['name'].valid \u0026\u0026 simpleBegReactiveForm.controls['name'].touched\"\u003e{{ titleAlertText }}\u003c/div\u003e\n\n        \u003c!-- description --\u003e\n        \u003clabel\u003eDescription\n          \u003ctextarea formControlName=\"description\"\u003e\u003c/textarea\u003e\n        \u003c/label\u003e\n        \n        \u003c!-- show name description text --\u003e\n        \u003cdiv class=\"alert\" *ngIf=\"!simpleBegReactiveForm.controls['description'].valid \u0026\u0026 simpleBegReactiveForm.controls['description'].touched\"\u003e{{ descriptionAlertText }}\u003c/div\u003e\n\n        \u003c!-- checkbox --\u003e\n        \u003clabel for=\"validate\"\u003eMinimum of 5 Characters Name required\u003c/label\u003e\n        \u003cinput type=\"checkbox\" name=\"validate\" value=\"1\" formControlName=\"validate\" \u003e ON\n\n        \u003c!-- submit button --\u003e\n        \u003cinput type=\"submit\" class=\"button expanded\" value=\"Submit Form\" [disabled]=\"!simpleBegReactiveForm.valid\"\u003e\n\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n  \u003c/form\u003e\n\n\u003c/div\u003e\n\n\u003c!-- show this template if name property exists or form submitted --\u003e\n\u003cng-template #formsubmitdata\u003e\n\n  \u003cdiv class=\"form-container\"\u003e\n\n    \u003cdiv class=\"row columns\"\u003e\n\n      \u003ch2\u003eYou Entered Name: {{ name }}\u003c/h2\u003e\n\n      \u003cp\u003eYour Description Details: {{ description }}\u003c/p\u003e\n\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n  \n\u003c/ng-template\u003e\n```\n\n**Syntax \u0026 Example**: styles.css\n```css\n/* You can add global styles to this file, and also import other style files */\n\n/* apply google font family */\n@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei');\n\nbody {\n  background:rgba(148, 134, 93, 0.35);;\n  /* font-family: 'ZCOOL XiaoWei', serif !important; */\n}\n\n* {\n  font-family: 'ZCOOL XiaoWei', serif !important;\n}\n\n.form-container {\n  display:block;\n  width:90%;\n  padding:2em;\n  margin: 2em auto;\n  background:#fff;\n}\n\nh1 {\n  text-align: center;\n  margin-bottom: 1rem;\n  font-weight:bold;\n}\n\n.button {\n  margin-top: 1rem;\n  font-weight: bold;\n}\n\n/* error text message alert */\n.alert {\n  background: #f2dada;\n  padding: 5px;\n  font-size: .9em;\n  margin-bottom: 15px;\n  display: inline-block;\n  animation: 2s alertAnim forwards;\n}\n\n/* animation effect for error text message alert */\n@keyframes alertAnim {\n  from {\n    opacity:0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity:1;\n    transform: translateY(0);\n  }\n}\n```\n\n**Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\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**Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, 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 {\n\n  simpleBegReactiveForm: FormGroup;     // form\n  formSubmitPost: any;                  // A property for our submitted form\n  name: string = '';                    // name text\n  description: string = '';             // description text\n\n  titleAlertText = 'Name field is required';\n  descriptionAlertText = 'Specify Description between 30 to 100 characters';\n\n  // create a FormBuilder dependecy injection\n  constructor(private fb: FormBuilder) {\n\n    // reference FormBuilder instance to control the validation of each form field\n    this.simpleBegReactiveForm = fb.group({\n      'name': ['', Validators.required],\n      'description': ['', [Validators.required, Validators.minLength(30), Validators.maxLength(100)]],\n      'validate': ''\n    });\n\n  }\n\n  // handler to submit form\n  submitFormData(formSubmitPost) {\n    this.description = formSubmitPost.description;\n    this.name = formSubmitPost.name;\n  }\n  \n  ngOnInit() {\n\n    // subscribe checkbox\n    this.simpleBegReactiveForm.get('validate').valueChanges.subscribe(\n\n    (validate) =\u003e {\n\n      if (validate == '1') {\n        // name field set/unset `required` validators\n        this.simpleBegReactiveForm.get('name').setValidators([Validators.required, Validators.minLength(5)]);\n        this.titleAlertText = 'Specify Name with 5 characters';\n      } else {\n        this.simpleBegReactiveForm.get('name').setValidators(Validators.required);\n        this.titleAlertText = 'Specify Name with 5 characters';\n      }\n      // to reflect latest correct status\n      this.simpleBegReactiveForm.get('name').updateValueAndValidity();\n\n    });\n  }\n\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactive-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactive-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-forms-reactive-tutorial/lists"}