如何将自定义Angular 2组件中的输出事件绑定到父组件中的反应形式

Question

我在Angular 2中创建一个包含时间选择器子组件的反应形式。我的时间选择器组件将时间存储在Javascript日期对象中，并且每当时间改变时，它都会触发一个事件，其中日期作为父组件捕获的参数。

我知道可以调用一个可以在表单组中设置新值的函数。然而，这似乎很麻烦，特别是随着形式的增长。

我的问题是，有没有一种方法可以将日期对象从时间选择器组件绑定到我的父组件中的表单控件，而不显式捕获事件，或者Angular是否提供另一种方法？

这是子组件：

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

@Component({
  selector: 'time-picker',
  templateUrl: './time-picker.component.html',
  styleUrls: ['./time-picker.component.css']
})
export class TimePickerComponent implements OnInit {

  @Output() onTimePicked = new EventEmitter<Date>();

  hours = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ').map((x: string) => parseInt(x, 10));
  minutes = '00 15 30 45'.split(' ').map((x: string) => parseInt(x, 10));

  hour: number;
  minute: number;
  meridian: string;
  meridian_offset: number;

  constructor() {

    this.hour = 10;
    this.minute = 0;
    this.meridian = 'AM';
    this.meridian_offset = 0;

  }

  ngOnInit() {
  }

  changeHour(hour: string) {
    this.hour = parseInt(hour, 10);
    this.emitChange();
  }

  changeMinute(minute: string) {
    this.minute = parseInt(minute, 10);
    this.emitChange();
  }

  changeMeridian() {
    if (this.meridian === 'AM') {
      this.meridian = 'PM';
      this.meridian_offset = 12;
    } else {
      this.meridian = 'AM';
      this.meridian_offset = 0;
    }

    this.emitChange();
  }

  emitChange() {
    const newDate = new Date();

    // % by 12 otherwise this is incorrect for noon and midnight
    newDate.setHours(((this.hour % 12) + this.meridian_offset) % 24);
    newDate.setMinutes(this.minute);

    this.onTimePicked.emit(newDate);
  }

}

以下是父组件的简化版本：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-new-visit-request',
  template: `
            <form [formGroup]="form" novalidate (ngSubmit)="submit()">

                <!-- Start Date Time -->
                <div class="form-group">
                    <div formGroupName="start">

                      <label>Start Date<span class="text-danger">*</span></label>
                      <date-picker [startDate]="startDate">
                      </date-picker>

                      <label>Start Time<span class="text-danger">*</span></label>
                      <!-- This is the way I currently do it -->
                      <time-picker (onTimePicked)="call function to set value in form"></time-picker>

                      <label>End Time<span class="text-danger">*</span></label>
                      <!-- This is the way I want to do it -->
                      <!-- <time-picker formControlName="endTime"></time-picker> -->

                    </div>
                </div>

                <!-- Submit Button -->
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </form>`
})
export class NewVisitRequestComponent implements OnInit {

  form: FormGroup;
  startDate = new Date();

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      start: this.fb.group({
        date: [this.startDate, Validators.required],
        time: [{ hour: 8, minute: 0 }, Validators.required]
      })
    });
  }


  submit() {
    console.log(this.form.controls);
  }

}