{"id":22903428,"url":"https://github.com/sawyerbutton/validation-example-in-angular","last_synced_at":"2025-07-22T14:04:35.287Z","repository":{"id":120750802,"uuid":"150053463","full_name":"sawyerbutton/Validation-Example-In-Angular","owner":"sawyerbutton","description":"validation examples in angular forms including reactive form and template driven form","archived":false,"fork":false,"pushed_at":"2018-09-24T06:00:26.000Z","size":237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T07:25:40.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/sawyerbutton.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-24T04:20:11.000Z","updated_at":"2018-09-24T06:00:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"d087288f-ad85-4a3c-92cd-b297421d152d","html_url":"https://github.com/sawyerbutton/Validation-Example-In-Angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sawyerbutton/Validation-Example-In-Angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FValidation-Example-In-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FValidation-Example-In-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FValidation-Example-In-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FValidation-Example-In-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sawyerbutton","download_url":"https://codeload.github.com/sawyerbutton/Validation-Example-In-Angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FValidation-Example-In-Angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266507366,"owners_count":23940055,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-14T02:36:40.486Z","updated_at":"2025-07-22T14:04:35.257Z","avatar_url":"https://github.com/sawyerbutton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Validation Example In Angular\n\n## Based on angular 6.x, describe the usage of validation in angular reactive form and template driven form\n\n## CSS rely on bootstrap 4.1.1\n\n## What is this?\n\n\u003e This is a quick start example for setting up validation in Angular6 using reactive forms and template driven from\n\n### Reactive Form\n\n\u003e The example is a simple registration form with pretty standard fields for first name, last name, email and password. All fields are required, plus the email field must be a valid email address and the password field must have a min length of 6.\n  \n\u003e The example setup the form to validate on submit rather than as soon as each field is changed. This is implemented with a 'submitted' field in the app component that is set to true when the form is submitted for the first time.\n\n\u003e component defines the form fields and validators for our reactive registration form using an `Angular FormBuilder` to create an instance of a `FormGroup` that is stored in the registerForm property. The registerForm is then bound to the form in the template below using the `[formGroup]` directive.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component({\n  selector: 'app-reactive',\n  templateUrl: './reactive.component.html',\n  styleUrls: ['./reactive.component.css']\n})\nexport class ReactiveComponent implements OnInit {\n  registerForm: FormGroup;\n  submitted = false;\n  constructor(\n    private fb: FormBuilder\n  ) { }\n\n  ngOnInit() {\n    this.registerForm = this.fb.group({\n      firstName: ['firstName', Validators.required],\n      lastName: ['lastName', Validators.required],\n      email: ['email@.email.com', [Validators.required, Validators.email]],\n      password: ['password123', [Validators.required, Validators.minLength(6)]]\n    });\n  }\n  // convenience getter for easy access to form fields\n  get f() {\n    return this.registerForm.controls;\n  }\n  // validation will trigger after click the submit event\n  onSubmit() {\n    this.submitted = true;\n    if (this.registerForm.invalid) {\n      return;\n    }\n    alert('form submit success');\n  }\n}\n```\n\n![reactive form](src/assets/reactive-form.png)\n\n\u003e The form binds the form submit event to the `onSubmit()` handler in the reactive component using the Angular event binding `(ngSubmit)=\"onSubmit()\"`. \n\n\u003e Validation messages are displayed only after the user attempts to submit the form for the first time, this is controlled with the submitted property of the reactive component\n\n\n### template driven form\n\n\u003e validation is implemented using the `f.submitted` property of the `#f=\"ngForm\"` template variable which is true after the form is submitted for the first time.\n\n\u003e The form input fields use the `[(ngModel)]` directive to bind to properties of the model object in the template driven form component. \n\n\u003e Validation is implemented using the attributes `required`, `minlength` and `email`, the Angular framework contains directives that match these attributes with built-in validator functions.\n  \n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-template',\n  templateUrl: './template.component.html',\n  styleUrls: ['./template.component.css']\n})\nexport class TemplateComponent implements OnInit {\n  model: any = {};\n  constructor() { }\n\n  ngOnInit() {\n  }\n  onSubmit() {\n    alert('template driven form submitted!\\n\\n' + JSON.stringify(this.model));\n  }\n}\n```\n![template driven form](src/assets/template-driven-form.png)\n\n\n## Conclusion\n\n\u003e Even though there is personality of using reactive form or template form, but from my perspective, always using reactive form instead of template form, \n\n\u003e The majority reason for using reactive form is, it is more easier to watch the model level for the component, the code structure is more like from model to view, reduce the coupling between the view and model\n\n\u003e But in a word, it is personal idea not big issue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fvalidation-example-in-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsawyerbutton%2Fvalidation-example-in-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fvalidation-example-in-angular/lists"}