{"id":29193994,"url":"https://github.com/mr-ahmed-mr-bald/multi-step-form-angular","last_synced_at":"2026-04-09T17:54:24.363Z","repository":{"id":215328611,"uuid":"738667588","full_name":"Mr-Ahmed-Mr-Bald/Multi-Step-Form-Angular","owner":"Mr-Ahmed-Mr-Bald","description":"📝 This is my solution for Frontend Mentor's Multi-Step Form challenge","archived":false,"fork":false,"pushed_at":"2024-01-18T12:46:18.000Z","size":1780,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T05:04:37.984Z","etag":null,"topics":["angular","angular2","bem-methodology","css","forms","frontend-mentor","frontendmentor-challenge","html-accessibility","html5","javascript","multi-step-form","scss","typescript"],"latest_commit_sha":null,"homepage":"https://ahmed-elbald.github.io/Multi-Step-Form-Angular/","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/Mr-Ahmed-Mr-Bald.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-01-03T19:02:01.000Z","updated_at":"2024-01-04T12:43:46.000Z","dependencies_parsed_at":"2024-01-10T17:04:14.275Z","dependency_job_id":"72c56cc6-6c99-469a-9f17-f96db0d98bdd","html_url":"https://github.com/Mr-Ahmed-Mr-Bald/Multi-Step-Form-Angular","commit_stats":null,"previous_names":["ahmed-elbald/multi-step-form-angular","mr-ahmed-mr-bald/multi-step-form-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mr-Ahmed-Mr-Bald/Multi-Step-Form-Angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mr-Ahmed-Mr-Bald%2FMulti-Step-Form-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mr-Ahmed-Mr-Bald%2FMulti-Step-Form-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mr-Ahmed-Mr-Bald%2FMulti-Step-Form-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mr-Ahmed-Mr-Bald%2FMulti-Step-Form-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mr-Ahmed-Mr-Bald","download_url":"https://codeload.github.com/Mr-Ahmed-Mr-Bald/Multi-Step-Form-Angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mr-Ahmed-Mr-Bald%2FMulti-Step-Form-Angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263071327,"owners_count":23409255,"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","angular2","bem-methodology","css","forms","frontend-mentor","frontendmentor-challenge","html-accessibility","html5","javascript","multi-step-form","scss","typescript"],"created_at":"2025-07-02T03:37:22.967Z","updated_at":"2025-12-30T22:19:12.507Z","avatar_url":"https://github.com/Mr-Ahmed-Mr-Bald.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Design preview for the Multi-step form coding challenge](./design/desktop-preview.jpg)\n\n\u003ch1 align=\"center\"\u003eFrontend Mentor - Multi-step form\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n   \u003ca href=\"https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ/hub\"\u003eChallenge\u003c/a\u003e\n   \u003cspan\u003e|\u003c/span\u003e\n   \u003ca href=\"https://www.frontendmentor.io/solutions/mulitstep-form-with-angular-woCXBDbrYW\"\u003eMy Solution\u003c/a\u003e\n\u003c/h3\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Built With\n\n- HTML\n- SCSS\n- Typescript\n- Angular v17\n- NgRx Component Store\n- RxJs\n\n## App Features\n\nI've implemented all the features required by the original challenge, thus the user can:\n\n- Complete each step of the sequence\n- Go back to a previous step to update their selections\n- See a summary of their selections on the final steps and confirm their order\n- Receive form validation messages if:\n  - A field has been missed\n  - The email address is not formatted correctly\n- See hover and focus states for all interactive elements on the page\n- See animation effects when navigating from step to another\n\nIn addition, most form sections are built dynamically allowing for other features to be added easily in the future.\n\n## Intro\n\nThis is one of Frontend Mentor's interesting challenges. It's not the first time I tackle it though. I did it about\nfive month ago. Then, I decided to recreate it after learning Angular. Thus I used HTML, SCSS and Angular.\nI've also improved the overall accessibility and my code structure.\n\n## Hard Decisions I Had To Make\n\nThroughout this project, I came across a couple of problems that required taking some hard decisions.\nHere are some of them:\n\n1. **Structuring the project folders:**\n\n   At first, I was going to use the `AppComponent` as the main component for the form feature. But then\n   I decided that such a form can not be the main feature of an application. So, I've decided to make a separate feature\n   called `purchase`, in which I included the whole form. Regarding the structure of each feature's folder, I took that from\n   [Joshua Morony's video](https://youtu.be/7SDpTOLeqHE?si=wTS9S5t-O4tRaJ_t) about structuring Angular projects.\n\n2. **Should I use NgRx Global or Component Store?**\n\n   Honestly, I was going to use the Global Store. But again, I imagined what this form would look like inside a large website,\n   and how important it might be. I ended up deciding that its state could be managed using the Component Store. I don't know\n   if my decision was right especially that my store file is quite long. I would appreciate any feedback concerning that matter.\n\n3. **Structuring the form:**\n\n   Since the form is multi-step, I had to decide how to split those steps... Should they have different routes or may I just use links\n   that point to page fragments like `#personal-info` or `#summary`? I finally opted to use fragments as it seemed to me that transitioning\n   from step to another does not resemble transitioning among routes, which usually involve changing the whole view. I also used a `StepComponent` that represented the basic structure of all form steps like the header and the content.\n\n## What I Learned\n\nIn order to create this form, which is quite complex, I learned some Angular techniques I didn't know about like:\n\n1. Creating custom form controls using the `ControlValueAccessor` Interface.\n2. Making reusable input components by providing the `ControlContainer` to the component view.\n3. Some important WAI ARIA attributes for forms like `aria-invalid` and `aria-errormessage`.\n\n## Contribution\n\nIf you want to make any suggestions, feel free to do that in the [discussions section](https://github.com/Ahmed-Elbald/Multi-Step-Form-Angular/discussions). Also, feel free to clone the repo and play around with the source could.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-ahmed-mr-bald%2Fmulti-step-form-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-ahmed-mr-bald%2Fmulti-step-form-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-ahmed-mr-bald%2Fmulti-step-form-angular/lists"}