has-feedback not being applied on conditional elements using default decorator (ngAnimate)

[plong0]

I have discovered a rather specific bug when using angular-animate alongside angular-schema-form. The bug appears to come from ngAnimate, but thought I would share here in case anyone else encounters it with their asf forms.

The case is this:
a form item using default decorator, with a condition is not receiving the has-feedback class

The most obvious effect of this is that the feedback icons for those elements are appearing in the top right corner of the page rather than on the input.

The ngAnimate bug is described at angular/angular.js#9109 (comment)

[plong0]

As described in the ngAnimate issue thread, the bug comes when there are more than 1 interpolated values in the class attribute.

I have monkey patched a rather ugly fix, but it works...

dist/decorators.js::6
from: <div class=\"form-group schema-form-{{form.type}} {{form.htmlClass}}\" ng-class=\"{\'has-error\': ...

to: <div class=\"form-group {{form.htmlClass}}\" ng-class=\"{\'{{\'schema-form-\'+form.type}}\': true, \'has-error\': ...

src/directives/decorators/bootstrap/default.html

<div class="form-group {{form.htmlClass}}"
     ng-class="{ '{{'schema-form-'+form.type}}': true, 'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">

[philippwaller]

@plong0 and posterity: To solve this bug you can "reload" the template on runtime via the angular.config() method:

angular
    .config(['schemaFormDecoratorsProvider', function (decoratorsProvider) {
        var decorator = 'bootstrapDecorator';
        var formType = 'default';
        var template = '../bower_components/angular-schema-form/src/directives/decorators/bootstrap/default.html';
        decoratorsProvider.addMapping(decorator, formType, template);
}]);

It seems to be solving the base problem so you can use the original template form schema-from without any code adaptation. In my case, I will copy the template file in app directory to keep it in the build scope.

Update: I just found out that this fix is only working as long you not push new elements to the DOM. Therefore I suggest the same pressure but including the patch from @plong0.

[rnjailamba]

Why is this not closed? @davidlgj

[Anthropic]

@rnjailamba it is closed, what do you mean?

[rnjailamba]

@Anthropic i meant that the pull request is not merged - json-schema-form/angular-schema-form-bootstrap#13

[Anthropic]

@rnjailamba it will get merged when someone has time to look at it, we are rewriting the core of the framework so it is hard to deal with PR just at the moment. But it will happen in the next few weeks I hope.

[dorinniscu]

Seems that the problem is the multiple interpolation.
This works fine: class="form-group {{\'schema-form-\' + form.type + \' \' + form.htmlClass}}"
More about that: angular/angular.js#9109

[Anthropic]

@dorin-niscu what a coincidence, I changed it in my local build eight hours ago to:
"form-group {{::form.htmlClass + ' schema-form-' + form.type}}" and was going to build it soon :)

https://github.com/json-schema-form/angular-schema-form-bootstrap/blob/7b74047b4932b60f680544993a065ae94564e07d/src/bootstrap/default.html

[dorinniscu]

@Anthropic Hehe yes :)

[cividinidavide]

Any news?

[Anthropic]

@cividinidavide this should be working fine in the alpha version, if you are waiting on stable it wont be too much longer.