ng-BS3问题- angular中的datepicker必填字段

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-datepicker-example',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input type="text" placeholder="Choose a date" formControlName="date" ngbDatepicker #dp="ngbDatepicker">
      <button (click)="dp.toggle()" type="button">Open</button>
      <div *ngIf="myForm.get('date').invalid && myForm.get('date').touched" class="error">Date is required</div>
      <button type="submit">Submit</button>
    </form>
  `,
  styles: [`
    .error {
      color: red;
    }
  `]
})
export class DatepickerExampleComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      date: new FormControl(null, Validators.required)
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // Submit form
    }
  }
}