Modal & Form
Managers
Modal Manager
Motivation
- Consolidated logic / HTML
- Reduce errors
- Allow mobile-friendly modals
Consolidated Logic / HTML
- Entire modal definition (modal size, controller, template URL, etc.) all defined in the same location
- Define modal once, reuse where needed
- No need to include boilerplate modal HTML in every modal
Reduce Errors
- Boilerplate HTML is abstracted away
- No need to configure same modal twice
Allow Mobile-Friendly Modals
- Modal manager automatically uses the mobile modal when mobile device is detected
Form Manager
Motivation
- Reduce complexity
- Reduce errors
- Conventions
Reduce Complexity
- Fields require a lot of ceremony to get set up (similar HTML, validation is in HTML instead of in form definition, every form is wired up individually to controller)
- Since it has field types, we don't need to use ngPattern for validation, which is repeated throughout codebase (e.g. email pattern validation)
Reduce Errors
- Removes a lot of HTML errors because the HTML is abstracted away
- Easy to see what validation rules are
- Uses TypeScript, meaning we have compile-time checking instead of run-time checking
- When bug is found in field type, fix it in one spot and it's picked up by all applicable forms
Conventions
- No need to define HTML structure for each field
- Specify field type, get validation for free
- Server errors are handled automatically
- WAY less JS/HTML/CSS required
- Very easy to change the look and feel of all forms
Modal & Form
By Ryan Haugh
Modal & Form
- 453