title: Custom input component has required error even after being filled
body: <p>I've created a custom input component by implementing the <code>ControlValueAccessor</code> interface. Then, I put it on a form with required validation by setting the <code>required</code> property to <code>true</code>. However, it's giving me a &quot;required&quot; error even when the input is filled - in other words, <code>model.errors.invalid</code> is true even after I fill the field.</p>
  <p>A reproducible example is available on <a href="https://stackblitz.com/edit/angular-ivy-9p4udk?file=src/app/input-password/input-password.component.html" rel="nofollow noreferrer">StackBlitz</a>, but here is some of the code.</p>
  <h1>Component</h1>
  <pre class="lang-js prettyprint-override"><code>import { Component, forwardRef } from '@angular/core';
  import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  
  @Component({
    selector: 'app-input-password',
    templateUrl: 'input-password.component.html',
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; InputPasswordComponent),
        multi: true,
      },
    ],
  })
  export class InputPasswordComponent implements ControlValueAccessor {
    onChange = (value: any) =&gt; {};
    onTouched = () =&gt; {};
  
    private _password = '';
    private passwordIsVisible = false;
  
    get password() {
      return this._password;
    }
  
    set password(newPassword: string) {
      this._password = newPassword;
    }
  
    get buttonLabel() {
      return this.passwordIsVisible ? 'Hide password' : 'Show password';
    }
  
    get inputType() {
      return this.passwordIsVisible ? 'text' : 'password';
    }
  
    togglePasswordVisibility() {
      this.passwordIsVisible = !this.passwordIsVisible;
    }
  
    writeValue(value: any) {
      this.password = value;
      this.onChange(this.password);
    }
  
    registerOnChange(fn) {
      this.onChange = fn;
    }
  
    registerOnTouched(fn) {
      this.onTouched = fn;
    }
  }
  </code></pre>
  <h1>Template</h1>
  <pre class="lang-html prettyprint-override"><code>&lt;input [type]=&quot;inputType&quot; [(ngModel)]=&quot;password&quot; (blur)=&quot;onTouched()&quot; /&gt;
  &lt;button (click)=&quot;togglePasswordVisibility()&quot; style=&quot;cursor: pointer&quot;&gt;
    {{ buttonLabel }}
  &lt;/button&gt;
  </code></pre>
  <h1>Form</h1>
  <pre><code>&lt;app-input-password
    ngModel
    #model=&quot;ngModel&quot;
    [required]=&quot;true&quot;
  &gt;&lt;/app-input-password&gt;
  
  &lt;p&gt;Touched? {{ model.touched }}&lt;/p&gt;
  &lt;p&gt;Required error? {{ model.errors.required }}&lt;/p&gt;
  </code></pre>