title: Angular - controlValueAccessor method writeValue() not being called
body: <p>Angular Version: 6.1</p>
  
  <p>I'm trying to implement a custom  control using what Kara Erickson is calling a Composite ControlValueAccessor as shown in the presentation, <a href="https://www.youtube.com/watch?v=CD_t3m2WMM8&amp;t=2467s" rel="noreferrer">Angular Forms – Kara Erickson – AngularConnect 2017</a>. The control's value should be set to one of the two child input values.</p>
  
  <p>The issue is <code>writeValue()</code> seems to only be called initially and not on further value changes.</p>
  
  <p>Here's a <a href="https://stackblitz.com/edit/angular-najdyu" rel="noreferrer">stackblitz demo</a>.</p>
  
  <h3>form.html</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form #f="ngForm" (ngSubmit)="f.form.valid &amp;&amp; Submit(f)"&gt;
      &lt;confirm-password name='password' ngModel #pwd='ngModel'&gt;&lt;/confirm-password&gt;
      &lt;div&gt;{{pwd.status}}&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h3>confirm-password.html</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]='pass'&gt;
    &lt;label&gt;Password:
      &lt;input type="password" formControlName='pwd1' (blur)='onTouched()'&gt;
    &lt;/label&gt;
    &lt;div *ngIf="controlDir.touched &amp;&amp; controlDir.control.errors?.required" 
           class="error"&gt;Password is required.&lt;/div&gt;
  
    &lt;label&gt;Please re-enter password:
      &lt;input type="password" formControlName='pwd2' (blur)='onTouched()'&gt;
    &lt;/label&gt;
    &lt;div class='error' *ngIf='controlDir.touched &amp;&amp; controlDir.control.errors?.notEqual &amp;&amp; 
                              !controlDir.errors?.required'&gt;Passwords do not match.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>confirm-password.ts</h3>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, Self, OnInit, OnDestroy } from '@angular/core';
  import { ControlValueAccessor, AbstractControl, NgControl,
           ValidatorFn, Validators, FormGroup, FormControl } from '@angular/forms';
  import { Subscription } from 'rxjs';
  
  @Component({
    selector: 'confirm-password',
    templateUrl: './confirm-password.component.html',
    styleUrls: ['./confirm-password.component.css']
  })
  export class ConfirmPasswordComponent implements ControlValueAccessor, OnInit, OnDestroy
  {
    password: string; // the value of the control should be set to this value
    pass = new FormGroup({
      pwd1: new FormControl(),
      pwd2: new FormControl()
    });
    private onChange: (value: string) =&gt; void;
    private onTouched: (value: string) =&gt; void;
    private valueChanges: Subscription;
  
    constructor(@Self() public controlDir: NgControl)
    {
      controlDir.valueAccessor = this;
    }
  
    ngOnInit()
    {
      const control = this.controlDir.control;
  
      let myValidators = [
              Validators.required, 
              equalValidator(this.pass.controls.pwd1,
                             this.pass.controls.pwd2)
          ]
      // ovoid overwriting any existing validators
      let validators = control.validator
        ? [control.validator, ...myValidators]
        : [...myValidators];
      control.setValidators(validators);
      control.updateValueAndValidity();
    }
  
    writeValue(val: any)
    {
      /* whether everything inside of this method is commented out or not 
         doesn't seem to affect anything */
      console.log(val);
      //val &amp;&amp; this.pass.setValue(val, {emitEvent: false});
      this.password = val;
    }
  
    registerOnChange(fn: (val: any) =&gt; void)
    {
      this.valueChanges = this.pass.valueChanges.subscribe(fn);
    }
  
    registerOnTouched(fn: () =&gt; void)
    {
      this.onTouched = fn;
    }
  
    setDisabledState(disabled: boolean)
    {
      disabled ? this.pass.disable() : this.pass.enable();
    }
  
    ngOnDestroy()
    {
      this.valueChanges.unsubscribe();
    }
  
  }
  
  export function equalValidator(el1, el2): ValidatorFn
  {
    return (ctrl: AbstractControl): {[key: string]: any} | null =&gt; {
      const notEqual = el1.value !== el2.value;
  
      return notEqual ?  {"notEqual": true} : null;
    };
  }
  </code></pre>