title: PrimeNG Calendar control Reactive Forms update value when calendar control is in invalid state does not see to update Calendar UI
body: <p>I am using PrimeNG Calendar control in an Angular Reactive Forms application. In my application I have a form with a calendar control inside a Primefaces dialog. </p>
  
  <p>When an invalid date value is typed into the calendar control I programmatically update the value of the control to a predefined rollback date value when the dialog is closed so that when it is shown again the form is in a valid state.</p>
  
  <p>However, I have found that updating the value of the calendar control programmatically does not consistently update the UI with the new value.</p>
  
  <p>I am using a FormGroup and have tried both setValue and patchValue. I have also tried using setValue and patchValue on the calendar control explicitly and also the reset method of formGroup. The problem still occurs.</p>
  
  <p>Just wondering if anybody can advise on where I am going wrong in the code?</p>
  
  <p>I have created a plunker at <a href="http://plnkr.co/edit/xc4ygZ?p=info" rel="nofollow noreferrer">http://plnkr.co/edit/xc4ygZ?p=info</a> , to illustrate an example. The code for the angular component and template is included below....</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 {
    Component
  } from '@angular/core';
  import {
    FormBuilder
  } from '@angular/forms';
  import {
    FormGroup
  } from '@angular/forms';
  import {
    OnInit
  } from '@angular/core';
  import {
    Validators
  } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: 'app/app.template.html'
  })
  
  
  export class AppComponent {
  
    birthDate: Date;
    form: FormGroup;
  
    formErrors = {
      'setdate': '',
    };
  
  
    validationMessages = {
      'setdate': {
        'required': 'Set date is required.',
        'invalidDate': 'Invalid Date.'
      },
    };
  
  
    constructor(private fb: FormBuilder) {
  
      this.birthDate = new Date();
    }
  
  
    ngOnInit(): void {
      this.buildForm();
    }
  
  
    onSubmit(): void {
  
    }
  
  
    setSetDate(): void {
      let today = new Date();
  
      this.form.patchValue({
        setdate: today
      });
  
    }
  
  
    private buildForm(): void {
      this.form = this.fb.group({
        setdate: [this.birthDate, [Validators.required]]
      });
  
      this.form.valueChanges
        .subscribe(data =&gt; this.onValueChanged(data));
      //this.onValueChanged(); 
    }
  
  
  
  
  
    private onValueChanged(data ? : any): void {
  
      let _self = this;
  
      if (!this.form) {
        return;
      }
      const form = this.form;
  
      console.log("onValueChanged()");
      for (const field in this.formErrors) {
        // clear previous error message (if any)
        this.formErrors[field] = '';
        const control = form.get(field);
        if (control &amp;&amp; control.dirty &amp;&amp; !control.valid) {
          const messages = this.validationMessages[field];
          for (const key in control.errors) {
            this.formErrors[field] += messages[key] + '\n';
          }
        }
      }
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; Enter a date that is invalid, e.g. edf. Then try clicking the button to programmatically reset the date&lt;/p&gt;
  &lt;p&gt; The UI for the calendar control does not consistently update with the new date. &lt;/p&gt;
  &lt;form autocomplete="off" [formGroup]="form" novalidate (ngSubmit)="onSubmit()"&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="setdate" class="control-label col-xs-4"&gt;Set Date&lt;/label&gt;
      &lt;div&gt;
        &lt;p-calendar #theDate id="setdate" formControlName="setdate" showTime="true" hourFormat="24" dateFormat="dd-mm-yy" [showIcon]="true" placeholder="Set Date" required&gt;
  
        &lt;/p-calendar&gt;
        &lt;p&gt;SetDate Value :: {{ theDate.value }}&lt;/p&gt;
        &lt;p&gt;SetDate Valid :: {{ this.form.controls['setdate'].valid }}&lt;/p&gt;
        &lt;p&gt;SetDate Errors :: {{ this.form.controls['setdate'].errors | json }}&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div *ngIf="formErrors.setdate" class="alert alert-danger"&gt;
        {{ formErrors.setdate }}
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;button type="button" class="btn" (click)="setSetDate()"&gt;Test SetDate&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>