{"id":16192428,"url":"https://github.com/kirandash/feedback-form-angular","last_synced_at":"2025-06-12T04:34:38.070Z","repository":{"id":100517295,"uuid":"181745589","full_name":"kirandash/feedback-form-angular","owner":"kirandash","description":"Reactive or model driven form built with angular.","archived":false,"fork":false,"pushed_at":"2019-04-20T14:23:27.000Z","size":133,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T05:44:32.850Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"http://bgwebagency.in/projects/ui/customer-feedback-form/","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/kirandash.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":"2019-04-16T18:32:08.000Z","updated_at":"2019-04-20T14:23:28.000Z","dependencies_parsed_at":"2023-05-15T16:16:31.443Z","dependency_job_id":null,"html_url":"https://github.com/kirandash/feedback-form-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kirandash/feedback-form-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2Ffeedback-form-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2Ffeedback-form-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2Ffeedback-form-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2Ffeedback-form-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirandash","download_url":"https://codeload.github.com/kirandash/feedback-form-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2Ffeedback-form-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259397971,"owners_count":22851337,"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"],"created_at":"2024-10-10T08:09:59.820Z","updated_at":"2025-06-12T04:34:38.030Z","avatar_url":"https://github.com/kirandash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CUSTOMER FEEDBACK FORM WITH REACTIVE FORMS IN ANGULAR (BG WEB AGENCY)\n\n## 1. Intro - Model Driven Forms or Reactive Forms\nReactive forms helps us manage the state of a form at a given point in time. It helps us to write some executable code when any value or state changes.\nIt helps us to write complex validation rules in code.\nIt has direct access to the data model of our form.\nThe logic which we implement in model driven forms can be tested. And thus unit test can be done.\nReactive forms are used to implement more advance forms. Template driven forms are mainly for simpler implementations.\n\nng new feedback-form\n\n## 2. Create a Form Component\n\ncreate a component: ng g c feedback-form\n\n## 3. ReactiveFormsModule \u0026\u0026 FormGroup\napp.module.ts file import ReactiveFormsModule\nimport { ReactiveFormsModule } from '@angular/forms';\n\nfeedback-form.component.ts\nimport { FormGroup } from '@angular/forms'; Form group represents the entire form that we are going to build.\n\nFormBuilder is used to build the form. import { FormGroup } from '@angular/forms';\n\n## 4. HTML and CSS\nstyles.css, feedback-form.component and app.component\n\n## 5. Creating FormControl\nFormGroup represents the entire form. And the individual form elements will be represented by FormControl. Thus, FormControl is the building block of a FormGroup.\nimport { FormGroup, FormBuilder, FormControl } from '@angular/forms';\n\n## 6. Creating nested form groups\nCreating form groups inside form groups for holding similar form control elements e.g a group of checkboxes\n\n## 7. Creating Form Controls inside nested form groups\n\n## 8. Creating Form Controls for radio buttons\nRadio buttons is just a single input. Thus we are not having a different form group for this. While checkbox has multiple inputs with multiple values, so having a form group to wrap them around.\n\n## 9. Creating Form Array for dynamic elements\nA Form Array is also like Form Group and can be used to create multiple form control elements. This is unique in the way that we can create/add/delete form control elements inside it.\n\n## 10. Creating Add/Delete functions\n\n## 11. Pre filling data in form\nIn HTML we use \"value\" attribute. Thus giving the same data from value of an input into form control will set it as default selection.\n\n## 12. Pre filling data in form with setValue in ngOnInit\n\n## 13. reset()\nAny form group or form control or form array can be cleared with reset()\n\n## 14. Showing form data on HTML\njson pipe used to view HTML data for easier coding\n\n## 15. Submit Feedback Form\n(ngSubmit)\n\nWIRING FORMGROUP FROM TS INTO HTML\n\n## 16. formControlName\nIt links formcontrol created in ts with input file in html. This also takes care of two way binding of input.\n\n## 17. formArrayName and looping through form array controls\nAdding/removing more feedbacks\n\n## 18. formGroupName and formControlName for nested form groups in checkboxes\n\n## 19. Adding formControlName to select\nWe can use [ngValue] from [ngSelect] to save object in a select also instead of just a string. Thus makes coding easier.\n\n## 20. Adding formControlName to textarea\n\n## 21. Adding formControlName to radio buttons\nNote that better to replace name with formControlName or. Name and formControlName should be same.\n\n## 22. Hiding the detailed feedback section if gender is male\nUse get handler to get any formcontrol value in HTML template\n\n## 23. Change classes\nng-untouched - if input has not been touched even once\nng-touched - if input is once touched or focused\nng-pristine - if input's value has not been changed even once\nng-dirty - if input's value has changed atleast once\n\n## 24. Using valueChanges event to subscribe to change event of an input\nvalueChanges.subscribe and .get() handler\n\n## 25. Using Validators\n\n## 26. Validators.required with error message\n\n## 27. Array of validations\nValidators.required, Validators.minLength\nto get errors data: use the errors property from the formscontrol object\n\n## 28. Complex/Custom Validators\nShow error message if customer has a Washing Machine product and tries to choose Proper Installation option\n\n## 29. Disabling submit button if form is not valid\n\n## 30. Build and move to server\nng build\nchange base href=\"/projects/ui/customer-feedback-form/\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirandash%2Ffeedback-form-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirandash%2Ffeedback-form-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirandash%2Ffeedback-form-angular/lists"}