MEAN Stack – Modal Styling & AngularJS Form Validation – Day 23
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll make some final changes to our Update Customer Modal instance using Angular UI. We’ll use the AngularJS data-model references and classes, as well as an introduction to Form validation with AngularJS.
We look at:
– A recap of our Angular UI Customer Update Modal
– Using the AngularJS curly brackets to display the name of customer in the Modal
– Updating the reference to the ‘referred’ data model
– Updating the colour of the User glyphicon when the referred icon is checked using ng-class
– Form validation by adding mandatory fields to our Modal
– Adding a Form name to reference our Form from our Controller
– Checking to see if a Form is valid from within our Controller
– Disabling the Save & Close button when the Form is invalid
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.