Angular2标签上的for属性未将其链接到输入 [英] Angular2 the for attribute on a label does not link it to the input

问题描述

我正在使用Angular2 RC5. 我有一个封装标签和输入的组件

I am working with Angular2 RC5. I have a component encapsulating a label and an input

import { Component, Input} from '@angular/core';

@Component({
  selector: 'my-input',
  template: `
    <div class="mx-field" >
      <label [attr.for]="id"><ng-content></ng-content></label>
      <input
        type='text'
        id = "{{id}}"
      />
    </div>
  `
})

export class InputComponent {
  @Input() id: string;
}

可以从任何模板中调用它，如下所示:<my-input id="inputcontrol">input</my-input> 问题是，尽管我在浏览器中检查了开发工具时，for和id属性都已正确设置，但是当我单击标签时输入的内容并没有集中

It is called from any template as follows <my-input id="inputcontrol">input</my-input> The problem is that when I click on the label the input does not get focused, although when I check the dev tools in the browser both the for and id attributes are correctly set

这是显示问题的插件: https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

here is a plunker showing the issue: https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

推荐答案

好吧，我现在发现了一个骇客，如果我使用id以外的其他名称发送它，那么它是可行的.即:

Well I found a hack for now, If I send it using a name other than id it works. ie:

import { Component, Input} from '@angular/core';

@Component({
  selector: 'my-input',
  template: `
    <div class="mx-field" >
      <label [attr.for]="ident"><ng-content></ng-content></label>
      <input
        type='text'
        id = "{{ident}}"
      />
    </div>
  `
})

export class InputComponent {
  @Input() ident: string;
}

，然后从模板中将其命名为<my-input id="inputcontrol">input</my-input>.

and then from the templates call it <my-input id="inputcontrol">input</my-input> this works.

问题是DOM具有多个具有相同ID的元素(角组件和输入)

The problem was that the DOM had multiple elements (angular component and the input) with the same id

这篇关于Angular2标签上的for属性未将其链接到输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！