title: Why do I need call onChange and onTouch in writeValue when implementing ControlValueAccessor in Angular?
body: <p>I have implemented the following component. It works and behaves as expected. Nevertheless, as the implementation of <code>ControlValueAccessor</code> was new to me, I had to <a href="https://coryrylan.com/blog/angular-custom-form-controls-with-reactive-forms-and-ngmodel" rel="noreferrer">follow a blog</a> without understanding the deeper details of a few sections. So this is a type of "<em>it works but why?!</em>" situation.</p>
  
  <pre><code>@Component({ selector: ..., templateUrl: ..., styleUrls: ...,
    providers: [{ provide: NG_VALUE_ACCESSOR, 
                  useExisting: forwardRef(() =&gt; InputTextComponent), 
                  multi: true }]
  })
  export class InputComponent implements ControlValueAccessor {
  
    constructor() { }
    @Input() info: string;
    onChange: any = () =&gt; { }
    onTouch: any = () =&gt; { }
  
    writeValue(input: any): void {
      this.info.value = input;
      // this.onChange(input);
      // this.onTouch();
    }
  
    registerOnChange(_: any): void { this.onChange = _; }
    registerOnTouched(_: any): void { this.onTouch = _; }
  
    setDisabledState?(state: boolean): void { }
  
    onEdit(value: string): void { this.onChange(value); }
  }
  </code></pre>
  
  <p>When I've got it working, I commented out the second and third line of <code>writeValue(...)</code> method and, as far I can tell, nothing broke. Those calls are consistently suggested by <a href="https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html" rel="noreferrer">other blogs</a> as well, so I'm convinced that it's improper to omit them. However, I don't believe in magic and prefer to have a concrete reason for doing things.</p>
  
  <p>Why is it important to execute the call to <code>onChange(...)</code> and <code>onTouch(...)</code> in <code>writeValue(...)</code>? What will go wrong and under what circumstances can it be expected?</p>
  
  <p>As a side quest, I also tried to comment out <a href="https://angular.io/api/forms/ControlValueAccessor" rel="noreferrer">the other methods</a> and discovered that I couldn't tell anything going bananas when I removed <code>setDisabledState(...)</code>. When can that one be expected to cause problems? Does it really need to be implemented (I've seen version with question mark both before and after the parentheses with parameters like so: <code>setDisabledState?(state: boolean): void { }</code> but also like this: <code>setDisabledState(state: boolean)?: void { }</code>).</p>