title: Angular & Typescript - Date input validation in the 'Input' field
body: <p>My Angular5 program includes an <code>input</code> field for entering date. I am using <code>NgbDateStruct</code> and <code>NgbCalendar</code> from <strong>ng-bootstrap</strong>. Though there is a calendar, for picking the date, when the user manually enters input to the date field, it doesn't validate. </p>
  
  <p>That is, in the input field allotted for entering the date, the user should not be able to enter a text or garbage data. But right now, the user is able to enter any kind of data.</p>
  
  <p>To do this client-side validation, I tried using <code>&lt;input type = "date"&gt;</code>, but the <code>input type = date</code> is <strong>not supported in IE 11 and earlier versions.</strong></p>
  
  <p>There were several solutions available in JQuery and JavaScript. But I cannot use JQuery and JavaScript in my Angular+TypeScript program. </p>
  
  <p>What is the way to validate the input field for <strong>Date</strong> such that the user will not be able to enter in the input field anything other than a valid date in <strong>Typescript</strong>?</p>
  
  <p>I tried the following workaround in TypeScript, but ended up with an error:</p>
  
  <p><strong>app.component.ts</strong>:</p>
  
  <pre><code>validateDate() {
       const regExp = /^(\d{4})\/(\d\d?)\/(\d\d?)$/;
      if (((this.fromDate).toString()).match(regExp)) {
          console.log('Valid Date');
      }
  }
  </code></pre>
  
  <p>The error I got was:</p>
  
  <blockquote>
    <p>[ts] - Property 'match' does not exist on type 'NgbDateStruct'</p>
  </blockquote>
  
  <p>where <code>this.fromDate</code> is the date input I am receiving from the view.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class = "input-group date"&gt;
      &lt;input class = "form-control" [(ngModel)] = "fromDate" ngbDatepicker #d = "ngbDatepicker" onmousedown = "validateDate()"&gt;
  &lt;/div&gt;
  </code></pre>