0

I'm building a simple form using AngularJS Messages. Basically what I want to happen is:

  • User submits form, all appropriate errors show and prevents submission
  • User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)

First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.

Any ideas?

<form name="orderForm" 
      ng-submit="orderForm.$valid && placeOrder()" novalidate>

   <input type="text" 
       ng-model="orderParams.delivery_address.full_name" 
       name="fullName" required />

   <p ng-message="orderForm.fullName.$error" 
      ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
      This field is required</p>

   <input type="submit" value="Submit" />

</form>
LT86
  • 635
  • 2
  • 15
  • 29

3 Answers3

2

For me the problem was solved by adding ngMessgaes to my module dependencies.

I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.

Andrzej Gis
  • 13,706
  • 14
  • 86
  • 130
0

you need to do three things: 1. add a boolean variable in your controller like: "showMessageBox" which is set to true. 2. when you submit you set "showMessageBox" to false. 3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable

aurelius
  • 3,946
  • 7
  • 40
  • 73
0

I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.

Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/

LT86
  • 635
  • 2
  • 15
  • 29