Q: Angular Material Compose Date picker component Stackblitz example
I would like to compose a component that wraps around the Material Date Picker implementation to simplify using the date component throughout the application. I had this working at one point but was mixing template-driven and reactive forms code which was never a good idea and now gives warnings that it is deprecated. So I am attempting to rewrite using only ngModel. However I am unable to get the validate to work correctly on the initial load. It always gives a required field error.
HTML
 <mat-form-field style="width:inherit">
  <input id="DatePickerControlInput" name="datePickerControlInput" #aocDatePickerControl="ngModel" (ngModelChange)="change($event)"
         matInput [matDatepicker]="picker" [required]="required"
         [placeholder]="label" [(ngModel)]="innerValue" (blur)="onBlur($event)" (dateChange)="onDateChange($event)" [max]="maxDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="aocDatePickerControl.invalid && (aocDatePickerControl.dirty || aocDatePickerControl.touched)">
    <div *ngIf="aocDatePickerControl.errors.required && !aocDatePickerControl.errors.matDatepickerParse">Required field</div>
    <div *ngIf="aocDatePickerControl.errors.matDatepickerMax">Date cannot be in the future</div>
    <div *ngIf="aocDatePickerControl.errors.matDatepickerParse">Not a valid date</div>
  </mat-error>
</mat-form-field>

TypeScript
import { Component, OnInit, OnChanges, forwardRef, HostBinding, Input, ViewChild, ElementRef } from '@angular/core';
import {
  ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl,
  Validator, Validators, ValidatorFn, AbstractControl, NgModel
} from '@angular/forms';
import * as moment from 'moment';

@Component({
  selector: 'aoc-date-picker',
  templateUrl: './CustomDatePicker.component.html',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => AocDatePickerComponent),
      multi: true
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AocDatePickerComponent),
      multi: true
    }
  ]
})
export class AocDatePickerComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {

  @ViewChild(NgModel) aocDatePickerControl: NgModel;
  @ViewChild('aocDatePickerControl', { read: ElementRef }) inputControl: ElementRef;

  @Input() label = 'Choose a date';
  @Input() required?= false;
  @Input() disabled?= false;
  @Input() autofocus?= false;
  @Input() allowFutureDates?= true;

  maxDate;

  innerValue;

  onChange: any = () => { };
  onTouched: any = () => { };

  constructor() { }

  focus() {
    this.inputControl.nativeElement.focus();
  }

  ngOnInit() {
  }

  ngOnChanges() {
    this.maxDate = this.allowFutureDates ? null : new Date();
  }

  writeValue(value: any) {
    this.innerValue = value;

    // this.aocDatePickerControl.control.setValue(this.innerValue);
    // this.aocDatePickerControl.control.updateValueAndValidity();
    // this.aocDatePickerControl.model = value;
    // this.aocDatePickerControl.valueAccessor.writeValue(value);
  }

  // This needs to be wired to the dateChange event and not dateInput event so that
  // the changed value is only bubbled up when the user changes focus or selects from
  // the popup calendar and not on each key stroke
  onDateChange(event) {
    this.onChange(event.value);
  }

  registerOnChange(fn: (value: any) => void) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean) {
    this.disabled = isDisabled;
    if (isDisabled) {
      this.aocDatePickerControl.control.disable();
    } else {
      this.aocDatePickerControl.control.enable();
    }
  }

  validate(control: FormControl) {
    const errors = Object.assign({}, this.aocDatePickerControl.errors || {});
    return Object.keys(errors).length && this.aocDatePickerControl.invalid ? errors : null;
  }

  onBlur($event) {
    if ($event.target && $event.target.value && $event.target.value.length === 8 && !isNaN($event.target.value)) {
      const val: String = $event.target.value;
      const month = val.slice(0, 2);
      const day = val.slice(2, 4);
      const year = val.slice(4);
      this.innerValue = new Date(`${ month }/${ day }/${ year }`);
      this.aocDatePickerControl.control.setValue(this.innerValue);
      this.aocDatePickerControl.control.updateValueAndValidity();
      this.onChange(this.innerValue);
    }
    if (this.aocDatePickerControl.hasError('matDatepickerParse')) {
      this.aocDatePickerControl.control.setValue(null);
      this.aocDatePickerControl.control.updateValueAndValidity();
    }

    this.onTouched();
  }
}


A: I received some help from posting an issue on the Material Github site that fixed my problem. Basically, for something like this reactive forms is better. Here is the comment and a link to the updated stackblitz.
In that case it's easier to handle the states with a reactive control: Updated StackBlitz
