title: Angular: updateValueAndValidity from directive
body: <p>I have a directive that appends decimals, if the input value is a whole number, on blur. Below is the implementation.</p>
  
  <pre><code>import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core';
  import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  
  @Directive({
    selector: '[price]',
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; PriceDirective),
        multi: true
      }
    ]
  })
  export class PriceDirective implements ControlValueAccessor {
  
    constructor(private el: ElementRef) { }
  
    // ControlValueAccessor interface
    private _onChange = (_) =&gt; { };
    private _onTouched = () =&gt; { };
  
    @HostListener('blur', ['$event'])
    input(event) {
      !!event.target.value ? $(this.el.nativeElement).val(Number(event.target.value).toFixed(2)) : $(this.el.nativeElement).val(null);
  
      this._onChange(parseFloat(event.target.value));
      this._onTouched();
    }
    writeValue(value: any): void {
      !!value ? $(this.el.nativeElement).val(Number(value).toFixed(2)) : $(this.el.nativeElement).val(null);
    }
  
    registerOnChange(fn: (_: any) =&gt; void): void { this._onChange = fn; }
    registerOnTouched(fn: any): void { this._onTouched = fn; }
  
  }
  </code></pre>
  
  <p>Things work as expected. </p>
  
  <p>But, since Angular doesn't trigger validation when the value is changed programatically, the textbox that has this directive, is not validated. </p>
  
  <p>How can I enable validation in this case, by other means than passing the <code>control</code> reference as an input to the directive and calling <code>updateValueAndValidity</code> on it, or calling <code>updateValueAndValidity</code> on <code>input</code> or <code>blur</code>.</p>
  
  <p>It would be great if someone suggests me a way to trigger validation from the directive itself.</p>