angular2 表单拆成多个组件及提交验证问题

1   <div class="clearfix"> 
2    <tl-check-box [labelname]="'设定'" [(ngmodel)]="isChecking" (onselectedfn)="selectedFn($event)"></tl-check-box> 
3    <div class="position-relative"> 
4     <tl-calendar [calendarobj]="calendarObj" [(ngModel)]="startDate" (ngModelChange)="selectDate($event)"></tl-calendar> 
5    </div> 
6   </div>

import { Component, OnInit, Output, Input, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CalendarObj } from '../../../../../shared'
@Component({
  selector: 'tl-goods-sold-out-timing',
  templateUrl: './goods-sold-out-timing.component.html',
  styleUrls: ['./goods-sold-out-timing.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => GoodsSoldOutTimingComponent),
      multi: true
    }
  ]
})
export class GoodsSoldOutTimingComponent implements OnInit {
  public calendarObj: CalendarObj;
  public isChecking: boolean;
  public startDate: Date;
  private change = (value) => { };      // 划重点
  constructor() {
    this.calendarInit();
  }
  ngOnInit() { }
  get auto_off_date() {      // 父组件的formControlName接收这块return的数据 get的auto_off_date名称和下面this.change(this.auto_off_date);括号中的值名称一样
    console.log(this.startDate);
    if (!this.isChecking) {
      return {
        date: '',
        set: this.isChecking
      }
    }
    return  {
      date: this.startDate ? this.formatDate(this.startDate) : '',
      set: this.isChecking
    }
  }
  registerOnChange(fn) {     
    this.change = fn;
  }
  registerOnTouched(fn) { }
  writeValue(value) {     //  初始时如果父组件有值传入，就从这里写入组件。
    console.log(value);
    if (!value) {
      this.isChecking = false;
    } else {
      this.startDate = new Date(value.substr(0, 10));  // startDate为日历组件数据de双向绑定
      this.isChecking = true;
      console.log(this.startDate);
    }
  }
  // check-box事件
  selectedFn(event) {
    this.change(this.auto_off_date);
  }
  // 日期改变
  selectDate(date) {      // 数据一但改变，就调用一次change事件，如果上面html文件中没有写ngModelChange，这里日期改变就无法传值给父组件
    console.log(date);
    this.startDate = date;
    this.change(this.auto_off_date);    
  }
  // 日期格式转化
  formatDate = function (date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d;
  };
// 日历组件初始化
  calendarInit() {
    this.calendarObj = new CalendarObj();
    this.calendarObj.placeholder = '开始日期';
    this.calendarObj.readonly = true;
    this.calendarObj.yearNavigator = true;
    this.calendarObj.monthNavigator = true;
    this.calendarObj.showOtherMonths = true;
    this.calendarObj.style = { 'width': '93px' };
    this.calendarObj.inputStyle = { 'width': '93px', 'background-position': '87px 1px', 'border': '1px solid #c7c7c7' };
  }
}