Метка формы не фокусируется на вводе компонента

Question

У меня есть компонент ввода формы, который называется <cool-input>, который не имеет метки, поскольку он должен быть помещен в существующую форму. Когда я нажимаю на элемент метки в форме, я ожидаю, что он вызовет фокус на <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 для идентификатора входного элемента компонента так, чтобы метка может связываться с ним.

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