CODEWITHSUNDEEP
angularjsformsng-messages
LT86
LT86

Reputation: 655

Angular JS - How do I hide ng-message after form submit & valid entry

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

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>

Upvotes: 0

Views: 991

Answers (3)

Andrzej Gis
Andrzej Gis

Reputation: 14306

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.

Upvotes: 2

LT86
LT86

Reputation: 655

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/

Upvotes: 0

aurelius
aurelius

Reputation: 4076

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

Upvotes: 0

Related Questions