Bossable.com - MEAN Stack: 23 - Modal Styling & AngularJS Form Validation

Learn how to build a MEAN Stack (MongoDB, Express, AngularJS, NodeJS) app! Tutorial Step 23/30 - Modal Styling & AngularJS Form Validation.

Want to build scalable web apps quickly and easily? Check out the MEAN stack, a collection of technologies that fit together to provide a solution that allows for a full-stack JavaScript implementation of web applications.

If you like it, please share it!

---

This Video Tutorial:

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 refererence 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

Thanks for viewing. I really appreciate any feedback you have.

---

------

[Stelu]

Another awesome tutorial!!! - thanks so much!!

[brettfisher]

Great series, thank you.

I wanted to test the controller validation so I removed the ng-disabled. I found that I had to add a "this" before the form name in the if statement. Also, I hope we look at server-side validation later on in the series.

[BDMusicx]

I really like the vids. I only don't know if it is good that you can still update the form data (with your valid in the front-end data), but the mongodb call would fail for instance. How would you catch this?

[agonist_official]

Pressing cancel also saves my surname locally (not in mongodb). =(