angulardart/angular

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

lelabo-m commented

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
lelabo-m commented

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.

genesistms commented

What do you mean that parameter has to be a component attribute?

lelabo-m commented

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.

genesistms commented

Try this [attr.data-error]=" 'some text here would not work' "

lejard-h commented

Found an other solution which is not a 'hack'

<div @skipSchemaValidationFor="[data-error,data-success]" data-error="Please enter a valid title">
  • 👍3
matthewlloyd commented

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="...">