Javascript animations broken using angular 1.3.x and form with required fields

[chatellier]

I'm trying to update a working application from angularjs 1.2.26 to 1.3.1.
This application uses javascript animation based on jquery animations.

There is maybe a problem using this animation on a form containing required fields.

This can been seen in following fiddle : http://jsfiddle.net/myj3G/17/

This issue is related to previous issue #6536. This issue contains a workarround that doesn't work anymore.

[caitp]

looks to me like the only problem is that you're expecting the className to be an exact match --- http://jsfiddle.net/3tswxf13/ this is working fine

[chatellier]

This is still not working.
Each click on button should display or hide form.
Your change just hide form but does not display it again on next click.

[caitp]

that depends entirely on the evaluation of ng-hide, nothing else

[chatellier]

I don't understand. Is there a way to fix animation (both slide up AND slide down) ?
Or my code is not properly writen ?

[chatellier]

This seams to be a problem related to required fields.

In following fiddle: http://jsfiddle.net/myj3G/18/ if ng-form is not on the same element as ng-show, it's works fine.

[caitp]

@chatellier I was wrong --- the problem wasn't even that you were abusing ngAnimate's api, it was that you were trying to assign values to properties of a boolean, which doesn't really work in JS. Changing your model and required expression to point to something which can actually take properties fixes it:

http://jsfiddle.net/vr2a9kuo/

[caitp]

I'm not sure why ng-required="foo" isn't working, that deserves some investigation

[petebacondarwin]

The bug with foo was that multiple classes were being added or removed at the same time. So the value passed to beforeAddClass and removeClass looked like: ng-valid ng-valid-required ng-hide.
Using a regular expression to match the class solves the problem: http://jsfiddle.net/peLe9hj8/