Angular 7 - Can't bind to 'data-*' since it isn't an input of any bound directive or a native property.
lelabo-m opened this issue · 6 comments
I am using a frontend framework and js interop in my app.
Since my upgrade to latest version with NNBD support, I am seeing errors on this kind of HTML;
<span class="helper-text" data-error="Please enter a valid title" data-success=""></span>
Can't bind to 'data-error' since it isn't an input of any bound directive or a native property. Please check that the spelling is correct, or that the intended directive is included in the host component's list of directives. See more details go/skipschemavalidationfor.
If your project uses selector css styling heavily, or the templates contain external custom elements not supported by ACX, then this feature might not be a good fit for your project. To prevent compilation errors, please add your project to the disallow list in go/opted-out-missing-directive-validator
I can't find the resources mentioned in this message:
- go/skipschemavalidationfor
- go/opted-out-missing-directive-validator
And I don't have any idea on how to fix this error.
Env:
Dart: 2.14.2
AngularDart: 7.0.0
OS: Ubuntu 20.04
A solution was pointed on gitter.
Using the following syntax does not raise any error:
<span class="helper-text" [attr.data-error]="value"></span>
However, the parameter has to be a component attribute, which is not ideal but with limited side effects.
What do you mean that parameter has to be a component attribute?
It can't be a string parameter define in the HTML template:
<span class="helper-text" [attr.data-error]="some text here would not work"></span>
It has to be a ref to a component attribute in order to work.
At least, from what I could observe.
Try this [attr.data-error]=" 'some text here would not work' "
Found an other solution which is not a 'hack'
<div @skipSchemaValidationFor="[data-error,data-success]" data-error="Please enter a valid title">
Note that the argument to @skipSchemaValidationFor
is a CSS selector, so if you have multiple attributes that need to be skipped, the syntax is:
<div @skipSchemaValidationFor="[data-error],[data-success]" data-error="..." data-success="...">