フォームのラベルはコンポーネントの入力に焦点を当てていません

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> 

ご協力いただきありがとうございます！ここ

はラベルがそれと通信できるように構成要素の入力要素のidため@Inputを提供する必要が<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

するためのコードです。

ここでは、この

<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あるようにあなたがそれを使用することになり、あなたのテンプレートで

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 = ''; 
} 

： https://plnkr.co/edit/QYI6mjGf4x6bfNyosSXK?p=preview