title: Angular 6: proper implementation of ControlValueAccessor
body: <p>I am creating a simple booking form with the following form using bootstrap 4 and angular 6 and igx-calendar for angular.<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html#calendar-demo" rel="nofollow noreferrer">igx-calendar</a> </p>
  
  <p>HTML.</p>
  
  <pre><code>&lt;form [formGroup]="angForm" class="form-element"&gt;
        &lt;div class="col-sm-4 offset-sm-2 about-booking_calendar"&gt;
          &lt;div class="form-group form-element_date"&gt;
          &lt;app-calendar formControlName="date" #date&gt;&lt;/app-calendar&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 about-booking_form"&gt;
          &lt;div class="form-group form-element_email"&gt;
            &lt;input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)"&gt;
          &lt;/div&gt;
          &lt;div *ngIf="angForm.controls['email'].invalid &amp;&amp; (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
            class="alert alert-danger"&gt;
            &lt;div *ngIf="angForm.controls['email'].errors.required"&gt;
              Email is required.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3 form-element_city"&gt;
            &lt;select class="custom-select" id="inputGroupSelect01" #cityName&gt;
              &lt;option selected *ngFor="let city of cities" [ngValue]="city.name"&gt;{{city.name}}&lt;/option&gt;
  
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3 form-element_hotel"&gt;
            &lt;select class="custom-select" id="inputGroupSelect01" #hotelName&gt;
              &lt;option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name"&gt;{{hotel.name}}&lt;/option&gt;
  
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;button type="submit" (click)="addReview(date.value, email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
              [disabled]="!validEmail"&gt;Book&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>calendar component.ts</p>
  
  <pre><code>import { Component, forwardRef, Input, OnInit, ElementRef, ViewChild } from '@angular/core';
  import { IgxCalendarComponent, IgxDialogComponent } from 'igniteui-angular';
  import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
  @Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.scss'],
    providers: [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =&gt; CalendarComponent), multi: true }
    ]
  })
  export class CalendarComponent implements ControlValueAccessor, OnInit {
    @ViewChild('calendar') public calendar: IgxCalendarComponent;
    @ViewChild('alert') public dialog: IgxDialogComponent;
    // tslint:disable-next-line:no-input-rename
    @Input('date') _date;
    @ViewChild('date') private elDate: ElementRef;
    instance;
    propagateChange: any = () =&gt; { };
    ngOnInit() {
      this.instance = this.calendar(this.elDate.nativeElement, {
        defaultDate: this.date,
        onChange: (selectedDates, dateStr, instance) =&gt; {
          this.date = selectedDates[0];
        }
      });
    }
    get date() {
      return this._date;
    }
  
    set date(val) {
      this._date = val;
      this.propagateChange(val);
    }
  
    writeValue(value) {
      if (value) {
        this.date = value;
        this.instance.setDate(this.date, true);
      }
    }
  
    registerOnChange(fn) {
      this.propagateChange = fn;
    }
  
    registerOnTouched() { }
  
    public verifyRange(dates: Date[]) {
      if (dates.length &gt; 5) {
        this.calendar.selectDate(dates[0]);
        this.dialog.open();
      }
    }
  }
  </code></pre>
  
  <p>NB: Here is visual of the form : 
  <a href="https://i.stack.imgur.com/pPqkU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPqkU.png" alt="enter image description here"></a></p>
  
  <p>I get the following error on the console when compiling, the problem is in this line at first:</p>
  
  <pre><code>  ngOnInit() {
      this.instance = this.calendar(this.elDate.nativeElement, {
        defaultDate: this.date,
        onChange: (selectedDates, dateStr, instance) =&gt; {
          this.date = selectedDates[0];
        }
      });
    }
  </code></pre>
  
  <p>For reference I used this method in this link : next.plnkr.co/edit/okIjPb6aUcrzx3t7edae?p=info&amp;preview
  they use flatpickr I use igx-calendar from:</p>
  
  <blockquote>
    <p>Error:Cannot invoke an expression whose type lacks a call signature.
    Type 'IgxCalendarComponent' has no compatible call signatures.</p>
  </blockquote>
  
  <p>I just want user to select a date and fill the form like email, city, hotel and be able to submit the form . </p>
  
  <p>What is wrong with my code ?  please help , am just learning all this stuff.</p>