How to get Angular 2 date input control initialization too work

Overview: In this code snippet, I will demonstrate how to do form validation. In this sample, [(..)] implies two way binding, where [] implies one way bind. I used one way binding for the date input and two way binding for the text input control. The error label is displayed if the control has a error.

For example, #amount="ngModel" is the control identifier to check if the control has an error like missing required fields.

The app.component.css has a style which creates changes the background color of the label to red if invalid and back to a white background if valid.

The  input.ng-invalid.ng-dirty {
    background-color: red;
  }

The date initialization does not work with two way binding. [ngModel] is one way binding. The data model is updated on the ngModelChange event which calls the dateChanged function of the component. The date must be in the y-MM-dd format created by the date pipe.

 private dateChanged(newDate) {
    this.postIncome.gLDate = newDate;
  }

Lastly, the submit button is disable while the #frmInput="ngForm" is invalid. Once the required fields have been inputted than the submit button will enable.

The onSubmit function receive the form object of type any. The forms valid attribute is checked if valid.

 <button type="submit" class="btn btn-success" [disabled]="frmInput.form.invalid">Submit</button>

 private onSubmit(incomeForm: any) {

    if (incomeForm.valid) {
      //alert(JSON.stringify(this.postIncome));
   
      this.myApp.postIncome(this.postIncome).subscribe
        (
        result => { alert('Posted'); this.loadIncomeViews(); }
        , error => console.error(error)
        );
      
    }
  }

Angular Input Form

  
  <form #frmInput="ngForm" (ngSubmit)="onSubmit(frmInput)">

    <div class="form-group">

      <label for="ctrl1">Income Amount:</label>
      <input #amount="ngModel" id="ctrl1" [(ngModel)]="postIncome.amount" required type="text" name="amount" class="form-control">

      <label id="error1" *ngIf="amount.control.hasError('required') " class="alert alert-danger validation-message">
        Amount required
      </label>

    </div>
    <div class="form-group">
      {{postIncome.gLDate}}
        <label for="ctrl2">GL Date</label>
        <input id="ctrl2" required type="date" [ngModel]="postIncome.gLDate | date:'y-MM-dd'" (ngModelChange)="dateChanged($event)" name="gLDate" class="form-control" />
   </div>
    <div class="form-group">
      <label for="ctrl3">Comments</label>
      <textarea [(ngModel)]="postIncome.comment" name="comment" class="form-control">
      </textarea>
    </div>
    <div class="form-group">
      <label for="ctrl4">Check #</label>
      <input id="ctrl4" type="text" name="checkNumber" [(ngModel)]="postIncome.checkNumber" />
    </div>
<div class="form-group">
  <button type="submit" class="btn btn-success"  [disabled]="frmInput.form.invalid">Submit</button>
  </div>