title: Angular 7 + Ngx-Bootstrap How to validating date?
body: <p>I am using ngx-bootstrap for date picker, my date picker has input format "dd/MM/yyyy" like 25/07/2019</p>
  
  <p>so I create an component for capturing the date and convert it into my reactive form (because mysql accept date as yyyy-mm-dd). I use ngModel in input and doing value changes everytime user did input value. </p>
  
  <p>the code as follow : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { environment } from './../../../environments/environment';
  import { Component, OnInit, Input } from '@angular/core';
  import { BsDatepickerConfig } from 'ngx-bootstrap';
  import { FormGroup } from '@angular/forms';
  import * as moment from "moment";
  
  @Component({
    selector: 'app-input-date',
    templateUrl: './input-date.component.html',
    styleUrls: ['./input-date.component.css']
  })
  export class InputDateComponent implements OnInit {
      @Input() form: FormGroup;
      @Input() fieldName: string;
      @Input() fieldDescription: string;
  
      datePickerConfig: Partial&lt;BsDatepickerConfig&gt;;
      tempDate: any ; 
      isInvalid: boolean;
  
    constructor() {
      this.datePickerConfig = Object.assign(
          {},
          {
            containerClass: "theme-dark-blue",
            dateInputFormat: environment.dateFormat
          }
        );
    }
  
    ngOnInit() {
      let theDate = this.form.get(this.fieldName).value;
      if( theDate != ""){
          this.tempDate = moment(theDate, environment.mysqlDateFormat).format(environment.dateFormat);
      }
    }
  
    get myField()
    {
        return this.form.get(this.fieldName);
    }
  
    // For date
    onDateModelChange(event)
    { 
      if(this.tempDate != ""){
          this.form.patchValue({
              [this.fieldName]: moment(this.tempDate, environment.dateFormat).format(environment.mysqlDateFormat)
          });
      }else{
          this.form.patchValue({
              [this.fieldName]: ""
          });
      }
      console.log(this.form.get(this.fieldName).errors);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" class="form-control mydatepicker" 
  placeholder="" id="mydatepicker"
  [ngClass]="{'has-error': myField.touched &amp;&amp; myField.hasError('required')}"
  [(ngModel)]="tempDate" (ngModelChange)="onDateModelChange($event)" [ngModelOptions]="{standalone: true}"
  [bsConfig]="datePickerConfig" bsDatepicker&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, I need to display error if the user forgot to enter the date or the date input was invalid. I set the reactiveform using Validators.required like </p>
  
  <pre><code>this.form = this.formBuilder.group({ dateOfBirth: ["", Validators.required]});
  </code></pre>
  
  <p>But since I use ngModel it wont validated. I just wonder how to get the field validated everytime user click / entering the input (pristine or dirty)</p>
  
  <p>I tried this code on my InputDateComponent but it always return null </p>
  
  <pre><code>onDateModelChange(event){
  console.log(this.form.get(this.fieldName).errors);
  }
  </code></pre>
  
  <p>If you have simple solutions for date format, I would like to know as well.. </p>