Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanda-abdul/angular-multi-step-form
This is a solution to the Multi-Step Form Challenge on Frontend Mentor using Angular.
https://github.com/chanda-abdul/angular-multi-step-form
angular frontend-mentor material-ui multi-step-form reactive-forms rxjs scss
Last synced: about 1 month ago
JSON representation
This is a solution to the Multi-Step Form Challenge on Frontend Mentor using Angular.
- Host: GitHub
- URL: https://github.com/chanda-abdul/angular-multi-step-form
- Owner: Chanda-Abdul
- Created: 2023-01-16T00:56:34.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-16T02:04:27.000Z (almost 2 years ago)
- Last Synced: 2024-11-14T02:23:49.071Z (3 months ago)
- Topics: angular, frontend-mentor, material-ui, multi-step-form, reactive-forms, rxjs, scss
- Language: SCSS
- Homepage: https://dazzling-crisp-559db7.netlify.app/
- Size: 1.61 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Multi-step Form solution
This is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
# Frontend Mentor - Multi-step form
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- [x] Complete each step of the sequence
- [x] See a summary of their selections on the final step and confirm their order
- [x] View the optimal layout for the interface depending on their device's screen size
- [x] See hover and focus states for all interactive elements on the page
## Links
Solution URL: [here](https://github.com/Chanda-Abdul/Angular-Multi-step-form) | Live Site URL: [here](https://dazzling-crisp-559db7.netlify.app/)
## Built with
## Screenshots
Mobile Screenshots @ 375px
### Step 1
#### Error Validation
### Step 2
### Step 3
### Step 4
### Confirmation
Desktop Screenshots @ 1440px
### Step 1
#### Error Validation
### Step 2
### Step 3
### Step 4
### Confirmation
## My process
### Setup
Initially found it challenging to figure out how to decide how to arrange the form and where state should live. I started with everything inside one form component, but as the component grew it became difficult to keep track of everything, So I ultimately decided to have a ``([code]() | [live]()) component with all of the nested childeren for each step. Each step has a decent amount of functionaly and styling so I decided this was the best approach.
- ``([code]() | [live]())
- ``([code]() | [live]())
- ``([code]() | [live]())
- ``([code]() | [live]())
- ``([code]() | [live]())
- ``([code]() | [live]())
### State Management
- I knew that I would like to have seperate components for the ``([code]() | [live]()), and the ``([code]() | [live]()) and the ``([code]() | [live]()). Initally I used `@Input()`'s and `@Output()`'s within the form to update the `activeStep` and `stepForm`.
- I knew that I would later move `activeStep` and `stepForm` to a service, for better readability, maintainabilty, and scalability.
- In `FormService` the `activeStep`piece of state can be viewed and updated with an Observable.
```ts
...
private activeStepSubject = new BehaviorSubject(1);
activeStep$ = this.activeStepSubject.asObservable();
...
goToNextStep(number: number) {
this.activeStepSubject.next(number + 1);
}
```
- Components can then access `activeStep$ ` by subscribing to the Observable
```ts
this.formService.activeStep$.subscribe(
step => this.activeStep$ = step
);
```
- The reactive `stepForm` also lives within the `FormService` so that it can be viewed and updated by multiple components as necessary
```ts
multiStepForm: FormGroup = this.fb.group({
personalDetails: this.fb.group({
name: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, Validators.minLength(10)]],
}),
planDetails: this.fb.group({
plan: ['arcade', [Validators.required]],
duration: ['monthly', [Validators.required]],
planCost: [9],
totalCost: [9]
}),
addOnDetails: this.fb.group({
service: [false],
serviceCost: [0],
storage: [false],
storageCost: [0],
customization: [false],
customizationCost: [0],
})
})
```
### What I learned
- `FormGroupDirective`
- How to work with Material UI components
- How to use a Service to manage data that can be shared between multiple components
### Continued development
- Things get a bit wonky around the tablet breakpoint of 768px, so I would like to add a few tablet styles.
- There's not much I would add to this, but this multi-step form would serve as a great tempalte for future projects.
### Useful resources
- [
Split an Angular Reactive Form model into child components ](https://youtu.be/2DOkiQFB5ic) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [ Material Button toggle](https://material.angular.io/components/button-toggle/overview) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. `` are on/off toggles with the appearance of a button.
- [ Material Checkbox](https://material.angular.io/components/checkbox/overview) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.`` provides the same functionality as a native `` enhanced with Material Design styling and animations.
- [ Creating a Custom @NgModule for Material Components in Angular](https://armno.medium.com/creating-a-custom-material-module-in-angular-ee6a5e925d30) - To keep AppModule clean, we can create another NgModule that takes care of importing Material modules to use.
## Author
- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)