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.

Next

MEAN Stack – Custom tags with AngularJS directives – Day 24
Previous

MEAN Stack – Save data with an AngularJS Modal – Day 22

15 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Nico
    Reply

    Hi Shristi! Thank you for the MEAN stack challenge. You are a really good teacher!
    I want to ask you if you did your website with the MEAN stack? or what did you use to build it? Because I almost finished the MEAN stack challenge and i’m looking forward to learn more about building websites and MEAN.

    Thanks a lot!

    Nico

  • David Boissier
    Reply

    Hi Shristi,

    I am David, author of the Mongo plugin for WebStorm/Intellij. Thanks to a user comment in the github source, I found this webcast.

    I am glad you enjoy using it and I really appreciate you promoted it. Many thanks for that.

    Your feedbacks (suggestions, bugs) on it are very valuable. Do not hesitate to post them in the issue section of the github project.

    Regards,

    David

  • David
    Reply

    Great tutorials Shristi!
    I’m having the same issue noted by John below… I applied the suggested ‘grunt happy’ patch but now the edit modal page isn’t posting to the db. Thoughts?

    • David

      Console message… Create works fine… I get a ‘message sent!’ response. I’m not getting any message from the edit page. I did notice today that the list page link generates the following console message…

      Uncaught TypeError: Cannot read property ‘getToggleElement’ of null….ui-bootstrap-tpls.js:1650
      closeDropdown….angular.js:2853
      (anonymous function)….angular.js:325
      forEach…angular.js:2852
      eventHandler

      Looks like I need to look at the list page?

    • bossable

      Hey David, the ‘getToggleElement’ is probably unrelated in your case.
      What code do you have on your button? It might not be calling the right function

    • Olusegun

      Hello, This is a great post. I just finished it.
      Unfortunately I am having the same problem as David. I can’t seem to locate what is responsible for the error:

      Uncaught TypeError: Cannot read property ‘getToggleElement’ of null
      closeDropdown @ ui-bootstrap-tpls.js:1650
      (anonymous function) @ angular.js:2853
      forEach @ angular.js:325
      eventHandler @ angular.js:2852

      Any solution?

    • bossable

      Sure – this error appears to be resolved in some of the later versions of ui-bootstrap, it appears when you select an item from a picklist – in the example, it’s most likely from selecting the Customers List from the menu.

  • John
    Reply

    Hello,

    I’ve been following a long and really li8ke your tutorial on how to adjust the MEAN.js stack. I’ve run into one questions and I’ve spent hours trying to resolve this with no luck. It comes from the use of name=”updateCustomerForm” in the controller for the button validation In my console when the server restarts, jshint provides a hint.

    51 | if (updateCustomerForm.$valid) {
    ^ ‘updateCustomerForm’ is not defined.

    My code is identical to yours on all the pages you’ve shown and I’m still getting this error both for the update and create modals. Everything else works great. Can you help me understand why your system thinks they are defined?

    Thanks,
    John

    • bossable

      Hey John, if you’re disabling the buttons, it’s more or less the same thing. But here’s a ‘grunt happy’ suggestion:

      In your html/button, you could put: ng-click=”ok(updateCustomerForm.$valid)”
      In your controller, you’d have something like:
      $scope.ok = function (isValid) {
      if (isValid) {
      $modalInstance.close();
      }
      };

    • John

      Thank you very much! That worked great. However I still don’t understand why what you did the first time worked for your installation but not mine. It’s as if there is a difference in scope which I can’t figure out.

    • martinroi

      I meet the same issue as yours. So, I used the above solution, and it works. It’s really weird. I guess maybe the meanjs or some packages version are different.