This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Angular
- Angular CLI version 15.2.5.
I would probably use a library for a multi-step form. But conceptually, I think it is important to understand what the libraries are doing to achieve the same functionality. I have used this design three times now, and it is interesting to see the various complications that arise in making a multi-step form.
There are not a lot of great resources on angular multi-step forms.
I noticed an issue with the past project's html where I used a div inside an li. This is incorrect, although it doesn't really affect the code.
Passing variables to a child component complicated matters here. I had problems passing the child's event object up to the parent. I tried to use a FormArray and push the checkbox name to the array, but ultimately, using a FormGroup and booleans made for easier development.
The calculation of the total value is not really optimized. I carried over my previous idea of using a lookup object; whether it really helped or not is debatable. The lookup object could be replaced with just more advanced ngIf conditionals in the HTML. You could use ng-templates and else conditions for all values of the multiStep object.
I carried over all styles from past implementations and placed them in the global styles.css file. Segmenting the CSS code per component can be done later.
Problems with navbar styling. The number circles are not lined up correctly with the step text. I think a rework of the HTML may be required to help ensure they line up exactly.
Also, styling is weak because an explicit height is not set. Different steps cause the container to shrink or grow. I had the error messages originally appear under the inputs, and that created a similar problem. Having the error messages and labels inside the same div creates an issue on very small screens where the text will expand past one line.
Although the original design doesn't disable the next button, I think it is a better approach that helps reduce writing extra checks in the submit method.
I didn't use a router. I could have had the 'Thank You' screen be its own component and on its own route. I could have put that component inside the form-container and toggled between the two components with an ngIf.
- Accessibility problems with the radio buttons?
- Routing ?
- Styling tweaks for more screen sizes
- Break this down into more components ?
- Typescript improvements
- Blog - pass function to child
- YouTube - Calling parent component method from child component using @Output() decorator in angular
- YouTube - Multi-Step form | Angular | stepper | Reactive Form | Part-1
- Stack Overflow - updating value on changes
- Blog - reactive forms in parent child components
- Stack Overflow - formgroup from parent to child
- KeyHole Software - complex reactive forms
- YouTube - angular reactive forms with multiple checkboxes | Form array in angular | Angular tutorials
- PositronX - angular checkbox tutorial
- Stack Overflow - emit an event up through multiple nested components
- Digitized Post - checkbox reactive forms
- Blog - ngif else
- LogRocket Blog - typesafe dictionary
- Stack Overflow - super simple email validation