Angular2, unable to assign calculated [for] property on a <label>

[tracker1]

[X] bug report
[X] feature request

• Do you want to request a feature or report a bug?

Bug in existing behavior, feature for proposed solution

I am creating an Angular2 component, in the template, I am wanting to create an <input>, with a calculated [id] property, which works.

I am also wanting to create a <label> with a matching [for] property, so that the label is appropriately bound to the input (clicking will focus said input).

• What is the current behavior?

EXCEPTION: Template parse errors:
Can't bind to 'for' since it isn't a known native property

• **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal

<label [for]="getInputId()">Label</label>
<input [id]="getInputId()" />

• What is the expected behavior?

The property should be calculated, and the result outputted into the <label> like the [id] property works for <input>;

• What is the motivation / use case for changing the behavior?

The current behavior doesn't support a necessary feature for HTML output in dealing with label association to form controls.

• Please tell us about your environment:

Angular version: 2.0.0-beta.7
Browser: all
Language: ES2016+ (Babel)

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

It would be nice if "unknown" native properties simply run and output the result,as [id] works on the <input> element.

[brandonroberts]

Try using [attr.for] and [attr.id] instead. These are attribute bindings. https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings

[tracker1]

@brandonroberts thanks... still climbing the hill that is learning Angular2 ... It was just wild that [id] works fine on an <input> but [for] doesn't work on <label> ... perhaps the error message should suggest Did you mean [attr.${unknown_name}]? usage as a hint.

[pkozlowski-opensource]

@tracker1 see more info in #5435

[tracker1]

@pkozlowski-opensource thanks, I'd searched for it... per your comment, would be nice if there were a property for this, even if it was only a mapping to attr.for, since I can see this being a huge piece of frustration... either way lesson learned... unfortunately, given the relatively common use of for searching for this specific issue was very difficult, and I didn't yield any answer before posting the issue.

In either case, a better error message would probably be the best alternative to adding [for], or another generic handling of unknown properties.

[poke]

It is called property binding, so it binds to properties only, not to attributes. The property is called htmlFor, and that is also what you can bind to:

<label [htmlFor]="getInputId()">Label</label>
<input [id]="getInputId()" />

[tracker1]

Then the property should be called for... creating unnecessary disconnects from the underlying output only serves to create confusion.

[0x-r4bbit]

Using [attr.for] is the right way to go here. This has been specifically designed for these kind of cases.

I agree with @tracker1 that we should improve the error message here.

@pkozlowski-opensource wdyt?

[poke]

@tracker1 The property name is defined in the HTML standard and has been called that way since the very first formal standardization of the DOM. That’s from 1998. I don’t think Angular should go around renaming standardized properties now.

[tracker1]

@poke id is an HTML standard as well, for a very long time, and I don't have to use [attr.id] for computed IDs on html components...

Again, I'd be okay with a better error message... in this specific case, for a <label> component, having a property of for that maps to attr.for would probably be a good idea... searching google/stackoverflow for this specific issue was pretty much impossible to determine what the actual problem was.

[zoechi]

@tracker1 that's because the property id reflects to the attribute id, but the property htmlFor reflects to the attribute for, and all browsers behave the same. If you want this fixed issue a bug report with the w3 spec. Googling for the error messages shows proper references with exact instructions how to cope with the problem.

[pkozlowski-opensource]

@PascalPrecht I think that we could internally (in the compiler) re-map for -> htmlFor. We do this already in the compiler for few cases (class -> className for example). Technically it is trivial to do but I'm not sure if all the browsers we are targeting are supporting the htmlFor property...

Would anyone be interested in checking cross-browser support for htmlFor property and eventually opening a PR similar to a7a1851 ?

[vicb]

The error message is now: Can't bind to 'for' since it isn't a known property of 'label'

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}