{"id":21231570,"url":"https://github.com/piyalidas10/reactive-form-with-dynamic-form-controls","last_synced_at":"2026-04-14T17:31:58.620Z","repository":{"id":38580414,"uuid":"251597223","full_name":"piyalidas10/Reactive-Form-with-Dynamic-Form-Controls","owner":"piyalidas10","description":"Reactive Form Validation with Dynamic Form Controls","archived":false,"fork":false,"pushed_at":"2023-01-07T16:34:50.000Z","size":3193,"stargazers_count":0,"open_issues_count":25,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T02:32:22.087Z","etag":null,"topics":["angular","angular8","dynamic-form","form","form-validation","reactive-form","reactive-form-validation","typescript","validation"],"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/piyalidas10.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":"2020-03-31T12:33:03.000Z","updated_at":"2021-08-08T05:24:32.000Z","dependencies_parsed_at":"2023-02-07T16:01:25.169Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Reactive-Form-with-Dynamic-Form-Controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Reactive-Form-with-Dynamic-Form-Controls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FReactive-Form-with-Dynamic-Form-Controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FReactive-Form-with-Dynamic-Form-Controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FReactive-Form-with-Dynamic-Form-Controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FReactive-Form-with-Dynamic-Form-Controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Reactive-Form-with-Dynamic-Form-Controls/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FReactive-Form-with-Dynamic-Form-Controls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31808505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["angular","angular8","dynamic-form","form","form-validation","reactive-form","reactive-form-validation","typescript","validation"],"created_at":"2024-11-20T23:47:21.221Z","updated_at":"2026-04-14T17:31:58.601Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Live URL\nhttps://piyalidas10.github.io/dynamic-form-control/\n\n# Run Application\n```\nng serve\nlocalhost:4200/\n```\n\n![Dynamic form controls](ss.png)\n\n# Reactive form controls (Taken help from these tutorials)\n\nhttps://stackblitz.com/edit/dynamic-form-generate-from-json-angular-2-reactive-form?file=src%2Fapp%2Fapp.component.ts\nhttps://medium.com/@fabiokounang/angular-6-dynamic-form-with-reactive-form-controls-43a10176a9f1\nhttps://dzone.com/articles/how-to-create-custom-validators-in-angular\nhttps://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example\nhttps://stackblitz.com/edit/angular-6-reactive-form-validation?file=app%2Fapp.component.html\n\n# Custom validator in Angular\n\nAngular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package.\n\nLet's assume you want to add a required validation to the email control and a maxLength validation to the password control. Here's how you do that:\n```\nthis.loginForm = new FormGroup({\n        email: new FormControl(null, [Validators.required]),\n        password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),\n        age: new FormControl(null)\n    });\n``` \nTo work with validators, make sure to import them into the component class:\n\n```\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\n```\n\nOn the template, you can use validators to show or hide an error message. Essentially, you are reading formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether formControl is touched or not using the touched property.   \n\n### Validate form on submission in reactive-form\n\nYou can actually achieve this already with the submitted flag on the top level form directive. create form directive using #formDir=\"ngForm\" and then check\nform is submitted or not using \"formDir.submitted\" checking. \"formDir.submitted\" will return you boolean value true or false.\n\n\n#### Static reactive form validation (Email)\n\n```\n\u003cdiv class=\"col-12 form-group\"\u003e\n  \u003clabel\u003eemail\u003c/label\u003e\n  \u003cinput type=\"email\" formControlName=\"email\" class=\"form-control\" [ngClass]=\"{'is-invalid' : registerForm.get('email').errors \u0026\u0026 formDir.submitted }\"\u003e\n  \u003cdiv *ngIf=\"!registerForm.get('email').valid \u0026\u0026 registerForm.get('email').errors \u0026\u0026 formDir.submitted\"\u003e\n    \u003cspan class=\"error\" *ngIf=\"registerForm.get('email').errors.hasOwnProperty('required')\"\u003eemail is required\u003c/span\u003e\n    \u003cspan class=\"error\" *ngIf=\"registerForm.get('email').errors.hasOwnProperty('email')\"\u003eemail must be valid\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n``` \n\n#### Dynamic reactive form validation (Email)\n\n```\n\u003cdiv class=\"col-12 form-group\"\u003e\n  \u003clabel\u003e{{form.key}}\u003c/label\u003e\n  \u003cinput [type]=\"form.input\" [formControlName]=\"form.key\" class=\"form-control\" [ngClass]=\"{'is-invalid' : registerForm.get(form.key).errors \u0026\u0026 formDir.submitted }\"\u003e\n  \u003cdiv *ngIf=\"!registerForm.get(form.key).valid \u0026\u0026 registerForm.get(form.key).errors \u0026\u0026 formDir.submitted\"\u003e\n    \u003cdiv *ngFor=\"let err of form.valids; let k = index\"\u003e\n      \u003cspan class=\"error\" *ngIf=\"registerForm.get(form.key).errors.hasOwnProperty(err.valid)\"\u003e{{err.error}}\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nOR\n\n```\n\u003cdiv class=\"col-12 form-group\"\u003e\n  \u003clabel\u003e{{form.key}}\u003c/label\u003e\n  \u003cinput [type]=\"form.input\" [formControlName]=\"form.key\" class=\"form-control\" [ngClass]=\"{'is-invalid' : registerForm.get(form.key).errors \u0026\u0026 formDir.submitted }\"\u003e\n  \u003cdiv *ngIf=\"!registerForm.get(form.key).valid \u0026\u0026 registerForm.get(form.key).errors \u0026\u0026 formDir.submitted\"\u003e\n    \u003cdiv *ngFor=\"let err of form.valids; let k = index\"\u003e\n      \u003cspan class=\"error\" *ngIf=\"registerForm.get(form.key).hasError(err.valid)\"\u003e{{err.error}}\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JSOn Form Data\n```\nthis.formFields = [\n      {\n        key: 'email',\n        input: 'email',\n        valids: [\n          {\n            valid: 'required',\n            error: 'email is required'\n          },\n          {\n            valid: 'email',\n            error: 'email must be valid'\n           }\n        ]\n      },\n      {\n        key: 'username',\n        input: 'text',\n        valids: [\n          {\n            valid: 'required',\n            error: 'username is required'\n          },\n          {\n            valid: 'pattern',\n            validator: '^[a-zA-Z]+$',\n            error: 'username is accept only text'\n          },\n          {\n            valid: 'minlength',\n            length: 3,\n            error: 'username must be at least 3 characters'\n          }\n        ]\n      },\n      {\n        key: 'password',\n        input: 'password',\n        valids: [\n          {\n            valid: 'required',\n            error: 'password is required'\n          },\n          {\n            valid: 'minlength',\n            length: 6,\n            error: 'Password must be at least 6 characters'\n          }\n        ]\n      },\n      {\n        key: 'phone',\n        input: 'text',\n        valids: [\n          {\n            valid: 'required',\n            error: 'phone is required'\n          },\n          {\n            valid: 'pattern',\n            validator: '^[0-9]{10}$',\n            error: 'phone is accept only number and maximum 10 numbers '\n          }\n        ]\n      },\n      {\n        key: 'gender',\n        input: 'radio',\n        items: [\n          {\n            name: 'male',\n            id: 0\n          },\n          {\n            name: 'female',\n            id: 1\n          }\n        ],\n        valids: []\n      },\n      {\n        key: 'country',\n        input: 'select',\n        items: [\n          {\n            name: 'india',\n            id: 0\n          },\n          {\n            name: 'bangladesh',\n            id: 1\n          }\n        ],\n        valids: [\n          {\n            valid: 'required',\n            error: 'country is required'\n          }\n        ]\n      }\n    ];\n```\n\n### ValidatorFn\nA function that receives a control and synchronously returns a map of validation errors if present, otherwise null.\n\nWe have a few built in validators in Angular:\n\n  1. required\n  2. minlength\n  3. maxlength\n  4. pattern\n\nCreating a custom validator for reactive forms is actually more simple than for a template driven form. You only need to implement ValidatorFn, which takes a form control and returns an error object.\n\n```\n    const validatorsArr: ValidatorFn[] = [];\n      if (element.valids.length \u003e 0) {\n\n        element.valids.forEach(val =\u003e {\n          if (val.valid === 'required') {\n            validatorsArr.push(Validators[val.valid]);\n          }\n          if (val.valid === 'pattern') {\n            validatorsArr.push(\n              Validators.pattern(val.validator)\n            );\n          }\n          if (val.valid === 'minlength') {\n            validatorsArr.push(\n              Validators.minLength(val.length)\n            );\n          }\n        });\n\n        this.registerForm.addControl(element.key, new FormControl('', validatorsArr));\n```\n\nvalidatorsArr is used to store validators controls for each fields. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Freactive-form-with-dynamic-form-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Freactive-form-with-dynamic-form-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Freactive-form-with-dynamic-form-controls/lists"}