{"id":21307314,"url":"https://github.com/jdegand/ada-school-frontend-challenge","last_synced_at":"2025-03-15T19:49:01.225Z","repository":{"id":231211357,"uuid":"781193827","full_name":"jdegand/ada-school-frontend-challenge","owner":"jdegand","description":"Solution for Ada School Frontend Challenge","archived":false,"fork":false,"pushed_at":"2024-07-30T20:16:56.000Z","size":189,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T09:12:33.555Z","etag":null,"topics":["ada-school","angular-in-memory-web-api","jasmine-tests","template-driven-form"],"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/jdegand.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":"2024-04-02T23:20:46.000Z","updated_at":"2024-07-30T20:16:59.000Z","dependencies_parsed_at":"2024-07-31T00:24:55.386Z","dependency_job_id":null,"html_url":"https://github.com/jdegand/ada-school-frontend-challenge","commit_stats":null,"previous_names":["jdegand/ada-school-frontend-challenge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fada-school-frontend-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fada-school-frontend-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fada-school-frontend-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fada-school-frontend-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/ada-school-frontend-challenge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243784103,"owners_count":20347409,"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":["ada-school","angular-in-memory-web-api","jasmine-tests","template-driven-form"],"created_at":"2024-11-21T16:31:14.422Z","updated_at":"2025-03-15T19:49:01.206Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ada School Frontend Challenge\n\nThis is a solution to an [Ada School repo](https://github.com/ada-school/front-end-challenge).\n\n## Built With\n\n- [Angular](https://angular.io)\n- [Angular CLI](https://github.com/angular/angular-cli) version 17.3.2.\n- [Angular In Memory Web API](https://www.npmjs.com/package/angular-in-memory-web-api)\n\n## Thoughts\n\n- The structure of a template model does not need to match the TypeScript model.\n- You can be creative and use this fact to your advantage to make some validation checks easier.  \n- You have to test a template driven form by interacting with the DOM.\n- `Step` is hit and miss in a `time` input.  It seems like it should work, but compatibility was changed at one point.  Across multiple browsers, it can vary.  I need to do more research, but this could be problematic.  I don't want to have to create a separate `step` function.\n- Using the in-memory web API, I think it is important to use `JSON`.  \n- I was using a `FormData` object and the POST request returned `{id: 3}` only (Booking collection starts with 2 objects).\n- I am using code I found on [Stack Overflow](https://stackoverflow.com/questions/43347621/correct-way-to-do-a-put-or-post-in-angular-in-memory-web-api) and it uses `reqInfo.utils.getJsonBody(reqInfo.req)`.  I need look into more methods I can use.  Maybe, I don't have to convert my `FormData` into JSON.  \n- Using different names for the form controls can add extra snags.  Sending FormData is usually not problematic with real backends. \n- You can use interceptors with the in-memory web API.    \n- `bookingForm.controls['formSelect']?.touched \u0026\u0026 bookingForm.controls['formSelect']?.errors?.['required']` throws a warning in the template, but if you don't include `?` after the control, you get an error in the browser.  You can suppress the warning in the `tsconfig.json` file.\n- `RouterTestingModule` is deprecated.\n\n## Continued Development\n\n- Tests\n\n## How to Use\n\n```bash\n# Clone this repository\n$ git clone https://github.com/jdegand/ada-school-frontend-challenge.git\n\n# Install dependencies\n$ npm install\n\n# Run the app and navigate to localhost:4200\n$ npm start\n\n# Run the tests (Firefox launcher is installed)\n$ ng test --code-coverage\n```\n\n## Useful Resources\n\n- [Angular Docs](https://angular.io/guide/forms) - forms\n- [StackBlitz](https://stackblitz.com/run?file=src%2Fapp%2Fhero-form%2Fhero-form.component.html) - hero form\n- [Angular University](https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/) - introduction to angular 2 forms template driven vs model driven\n- [Medium](https://medium.com/@zeeshankhan8838/template-driven-form-in-angular-b80a3ebbcd24) - template driven form in angular\n- [BezKoder](https://www.bezkoder.com/angular-17-template-driven-form-validation) - angular 17 template driven form validation\n- [Blog](https://timdeschryver.dev/blog/a-practical-guide-to-angular-template-driven-forms#intro) - practical guide to angular template driven forms\n- [Blog](https://blog.simplified.courses/angular-template-driven-forms-with-signals/) - angular template driven forms with signals\n- [Dev.to](https://dev.to/railsstudent/signal-queries-in-angular-what-can-i-do-with-them-4ip1) - signal queries in angular what can i do with them\n- [Stack Overflow](https://stackoverflow.com/questions/13713755/html-input-time-step-attribute-to-set-timestep-by-say-x-minutes) - html input time step attribute to set timestep by say x minutes\n- [Dev.to](https://dev.to/michaeljota/template-forms-are-just-as-powerful-as-reactive-forms-140n) - template forms are just as powerful as reactive forms\n- [Angular Docs](https://angular.io/tutorial/tour-of-heroes/toh-pt6) - tour of heroes part 6 \n- [Stack Overflow](https://stackoverflow.com/questions/76427328/anyone-try-using-inmemorywebapi-with-standalone-components) - anyone try using inmemorywebapi with standalone components\n- [Stack Overflow](https://stackoverflow.com/questions/42985153/error-collection-not-found-while-using-in-memory-web-api) - error collection not found while using in memory web api\n- [Stack Overflow](https://stackoverflow.com/questions/43347621/correct-way-to-do-a-put-or-post-in-angular-in-memory-web-api) - correct way to do a put or post in angular in memory web api\n- [Stack Overflow](https://stackoverflow.com/questions/40062477/formdata-append-not-working) - formdata append not working\n- [Stack Overflow](https://stackoverflow.com/questions/52031766/angular-form-data-wont-append) - angular form data wont append\n- [Stack Overflow](https://stackoverflow.com/questions/45240338/how-to-use-the-angular-in-memory-web-api-data-attribute) - how to use the angular in memory web api data attribute\n- [Blog](https://juri.dev/blog/2016/11/ng2-template-driven-form-validators/) - template driven form validators\n- [Stack Overflow](https://stackoverflow.com/questions/46589865/date-and-currency-validation-in-angular-4) - date and currency validation in angular 4\n- [Medium](https://medium.com/@yuvidev/angular-standalone-components-02-standalone-directives-585beb4f7e29) - angular standalone components 02 standalone directives\n- [Stack Overflow](https://stackoverflow.com/questions/42346172/angular-2-jasmine-test-whether-an-element-is-visible) - angular 2 jasmine test whether an element is visible\n- [Medium](https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6) - simulating event in angular unit tests\n- [Stack Overflow](https://stackoverflow.com/questions/40093013/unit-testing-click-event-in-angular) - unit testing click event in angular\n- [YouTube](https://www.youtube.com/watch?v=5Ueip44kjsQ) - Part 42- Angular Unit test case on template driven form |Angular unit test case Tutorials\n- [Stack Overflow](https://stackoverflow.com/questions/54642650/spec-has-no-expectation-console-error-although-expect-is-present) - spec has no expectation console error although expect is present\n- [Stack Overflow](https://stackoverflow.com/questions/24687355/faking-out-formdata-append-with-jasmine) - faking out formdata append with jasmine","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fada-school-frontend-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fada-school-frontend-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fada-school-frontend-challenge/lists"}