Включить компонент как FormControl Angular2

Question

У меня есть компонент, который имеет форму, встроенную в построитель форм, и теперь в этой форме мне нужно включить компонент, который имеет только одно поле ввода в качестве элемента управления формой.

add.ts

this.newForm = this.fb.group({ 
     name: ['', [Validators.required]], 
     surname:['', [Validators.required]], 
     time: '' 
    }); 

"время" должен быть включен в качестве компонента в другой.

add.html

<div class="form-group"> 
      <label class="col-md-3 control-label" for="name">{{'forms.newForm.label.configuration.name' | translate}}</label> 
      <div class="col-md-3"> 
       <input type="text" formControlName="name" placeholder="placeholder" 
        class="form-control input-md" type="text"> 
       <small *ngIf="!newForm.controls.name.valid && newForm.controls.name.dirty" class="text-danger"> 
       Name is required. 
       </small> 
      </div> 

      <label class="col-md-3 control-label" for="surname">{{'forms.newForm.label.configuration.name' | translate}}</label> 
      <div class="col-md-3"> 
       <input type="text" formControlName="surname" placeholder="placeholder" 
        class="form-control input-md" type="text"> 
       <small *ngIf="!newForm.controls.surname.valid && newForm.controls.name.dirty" class="text-danger"> 
       Surname is required. 
       </small> 
      </div> 
      </div> 

time.html

<div> 
    <div class="col-md-7"> 
    <input class="form-control input-md" type="text" (keydown)="eventHandler($event)" maxlength="11"> 
    <small *ngIf="!validTime" class="text-danger"> 
     Invalid time 
    </small> 
    </div> 
</div> 

Как я включать контроль формы «время» в качестве компонента в основной форме, так что я может получить доступ к значению через this.newForm .controls [ 'время']. ​​значение ??

Answer 1

Отдельный Form Control не может быть передан отдельно дочернему компоненту, он должен быть передан в пределах formGroup. Так что добавьте группу (здесь названный timeGroup) в форму:

this.newForm = this.fb.group({ 
     name: ['', [Validators.required]], 
     surname:['', [Validators.required]], 
     timeGroup: this.fb.group({ 
     time: '' 
     }) 
}); 

В вашем родительском HTML передать formGroup вашему ребенку:

<time-comp [timeGroup]="newForm.controls.timeGroup"></time-comp> 

и дочерний шаблон:

<div [formGroup]="timeGroup"> 
    <input formControlName="time"> 
</div> 

И не забудьте отметить группу форм, полученную от родителя, с помощью Input:

@Input() timeGroup: FormGroup; 

Затем вы можете получить доступ к значению time (в ваших родителях) с:

this.newForm.get('timeGroup').get('time').value; 

заметить также, что вам не нужно какое-либо событие, как keyup, изменения будут пойманный родитель без них.

Sample Plunker