ParsleyJS and interpolation of Angular2

Question

I have a problem with Parsley JS and interpolation of Angular2:

I need to pass an interpolation as value of the data-parsley-error-container.

Example:

<div class="input-group" id="{{id}}">
   <input type="number" id="service" [(ngModel)]="service" name="service" class="form-control" required="required" data-parsley-errors-container="{{id}}">
   <span class="input-group-addon">seconds</span>
</div>

I get the next error:

Error: Uncaught (in promise): Template parse errors: Can't bind to 'data-parsley-errors-container' since it isn't a known native property (" data-parsley-min="1" required="required" [ERROR ->] data-parsley-errors-container="{{id}}">

Do you have any idea or solution?

Answer 1

Use property binding instead of interpolation:

[data-parsley-errors-container]="id"

Answer 2

For non-native attributes, just bind with [attr.x]:

[attr.data-parsley-errors-container]="id"