Angular 6: How to Intergarte calender/date picker with form?

Question

I have two divs one contain a date picker /calender which allow user to select a date they want, second contain the form with email, citym and hotel,

so a user select a date and fill the form and submit it by clicking book.

Here is what I have

<div class="container about-booking-input">
  <div class="row about-title">
    <div class="col-md-7 about-title_bookingtitle">
      <h2>Booking</h2>
    </div>
  </div>
  <div class="row about-booking">
    <div class="col-sm-4 offset-sm-2 about-booking_calendar">
        <app-calendar></app-calendar>
    </div>
    <div class="col-sm-4 about-booking_form">
      <flash-messages></flash-messages>
      <form [formGroup]="angForm" class="form-element">
        <div class="form-group form-element_email">
          <input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['email'].errors.required">
            Email is required.
          </div>
        </div>
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName>
            <option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>
      </form>

    </div>
  </div>
</div>

Visul the looks liek this.

Right now I can submit just form without a date, after googling and googling found nothing helpful,

Note: I am using this datepicker ui : ignite -ui angular https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html

Question

How do I intergrate my calender with form and be able to submit it?

Answer 1

Your have to make your app-calender component become a custom form control. One nice article about this: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

In a nut shell, your AppCalenderComponent has to implement the ControlValueAccessor interface to be able to communicate with the formGroup. After you have successfully implemented the ControlValueAccessor for your AppCalenderComponent, you can include it in the form like below:

<form [formGroup]="form">
  <app-calendar formControlName="nameOfTheDatePickerControl"></app-calendar>
</form>