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