Question

我有一个名为<cool-input>的表单输入组件，它没有标签，因为它应该能够放在现有表单中。当我单击表单上的label元素时，我希望它能引起<cool-input>的注意，但这种行为不会发生。

<form class="form-horizontal" (ngSubmit)="onSubmit()" [formGroup]="form">
    <div class="form-group">
        <label for="name">First Name</label>
        <div class="col-md-8">
            <cool-input name="name" formControlName="name" ngDefaultControl></cool-input>
        </div>
    </div>
</form>

任何帮助将不胜感激，谢谢！

以下是<cool-input>

的代码

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

@Component({
  selector: 'cool-input',
  template: `
    <input type="text" placeholder="{{placeHolder}}"/>
  `,
})

@Injectable()
export class coolInput {
  @Input() placeHolder:string = 'Cool Input!';
}

Answer 1

您需要为组件的input元素的id提供@Input，以便标签可以与之通信。

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

@Component({
  selector: 'cool-input',
  template: `
    <input type="text" id="{{inputID}}" placeholder="{{placeHolder}}"/>
  `,
})

@Injectable()
export class coolInput {
  @Input() placeHolder:string = 'Cool Input!';
  @Input() inputID:string = '';
}

在你的模板中，你会像这样使用它

<form class="form-horizontal" (ngSubmit)="onSubmit()" [formGroup]="form">
    <div class="form-group">
        <label for="name">First Name</label>
        <div class="col-md-8">
            <cool-input inputID="name" formControlName="name" ngDefaultControl></cool-input>
        </div>
    </div>
</form>

这是一个演示功能的plunker： https://plnkr.co/edit/QYI6mjGf4x6bfNyosSXK?p=preview

表格标签不关注组件的输入

1 个答案: