21

I use the Angular 2.0 framework and try to create an input component. Also I use Google MDL and it's HTML structure required to have labels to input. Angular gives me an exception:

EXCEPTION: Template parse errors:
Can't bind to 'for' since it isn't a known native property ("s="mdl-textfield__input" type="text" id="{{input_id}}">
        <label class="mdl-textfield__label" [ERROR ->]for="{{input_id}}">{{input_label}}</label>
    </div>"): InputUsernameComponent@2:44

Here is the code:

import {Component} from 'angular2/core';
import {Input} from 'angular2/core';

@Component({
    selector: 'input-username',
    template: `<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="{{input_id}}">
        <label class="mdl-textfield__label" for="{{input_id}}">{{input_label}}</label>
    </div>`
})

export class InputUsernameComponent {
    @Input('input-id') input_id: string;
    @Input('input-label') input_label: string;
}

How can I resolve this issue?

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Nikita Nikitin
  • 540
  • 1
  • 6
  • 20

1 Answers1

51

update

In recent Angular2 versions for should be mapped to htmlFor automatically to avoid this kind of problem.

original

You need attribute binding instead of proper binding

<label class="mdl-textfield__label" attr.for="{{input_id}}">{{input_label}}</label>

or

 <label class="mdl-textfield__label" [attr.for]="input_id">{{input_label}}</label>

or

<label class="mdl-textfield__label" htmlFor="{{input_id}}">{{input_label}}</label>

htmlFor is the property that reflects the for attribute (https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement)

See also HTML - attributes vs properties

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • @Günter : in RC5 this is not working, is it broken now or is there a new way to do it? – Mostafa Fateen Aug 25 '16 at 16:58
  • Binding to `for` should now work. AFAIK they added some mapping. How is it broken? The old way should still work. – Günter Zöchbauer Aug 25 '16 at 17:04
  • no binding to for is still broken but it doesn't give me errors when i use any of your methods it just doesnt work. When I add a for in a label I am expecting that when I click on the label the input is focused. However, when I click it nothing happens – Mostafa Fateen Aug 26 '16 at 08:48
  • here is your same plunker with the broken behavior i am talking about https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n – Mostafa Fateen Aug 26 '16 at 09:18
  • That looks more like a browser issue. The attributes are properly set. If I don't miss something essential this is not related to this question. – Günter Zöchbauer Aug 26 '16 at 09:24
  • I do not believe it is a browser issue as it neither works on chrome nor firefox and I haven't tested on other browsers – Mostafa Fateen Aug 26 '16 at 09:28
  • If you use the browser devtools and check the DOM it is correct, just the browser doesn't recognize it. It might be some special treatment the browsers require in certain situations which isn't met by how Angular sets the attributes/properties, but the properties are actually set, therefore it in my opinion not related to this question. – Günter Zöchbauer Aug 26 '16 at 09:29
  • yes i have already seen that but i was asking why? anyways I am writing an independent question – Mostafa Fateen Aug 26 '16 at 09:31
  • 1
    here is a link for the question: http://stackoverflow.com/questions/39163205/angular2-the-for-attribute-on-a-label-does-not-link-it-to-the-input – Mostafa Fateen Aug 26 '16 at 09:40
  • what about if you don't use id attribute, but name attribute for the input, why i need id, it's not enough with name? how i do in this case the label: – stackdave Dec 01 '16 at 10:22
  • Sorry, I don't get how this is related to this question or my answer. – Günter Zöchbauer Dec 01 '16 at 10:23
  • 1
    @deadManN that's what the first line says ("update"). In older versiond this didn't work. – Günter Zöchbauer Jul 03 '19 at 11:45
  • so there is nothing special about it? it act like data-X for old browsers... it just say this attribute is not automatically mappable, but you should map it and treat it like any other attributes... – Hassan Faghihi Jul 03 '19 at 16:40
  • The `for` attribute is mapped to the `html_for` property in the `label` element, I guess to avoid name collisions with the JS `for` keyword. Angular special-cased it at some point to make this difference opaque to Angular users. There are also a few other attributes where the attribute and property name are not equal. – Günter Zöchbauer Jul 03 '19 at 18:42