title: Angular: Custom FormControl doesn't update view after FormGroup.reset()
body: <p><strong>This is my 'registration' page:</strong></p>
  
  <ul>
  <li><p>registration.component.html</p>
  
  
  
  <pre><code>&lt;mat-form-field appearance="standard"&gt;
      &lt;mat-label&gt;First name&lt;/mat-label&gt;
      &lt;input matInput formControlName="firstName"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;div formGroupName="locationGroup"
         class="location-group"&gt;
  
      &lt;acme-location-picker formControlName="country"
                          [label]="'Country'"
                          [locations]="countries"&gt;&lt;/acme-location-picker&gt;
  
      &lt;acme-location-picker formControlName="city"
                          [label]="'City'"
                          [locations]="cities"&gt;&lt;/acme-location-picker&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  </li>
  <li><p>registration.component.ts
      this.registrationForm = this.fb.group({</p>
  
  <pre><code>    firstName: ['', Validators.compose([Validators.required])],
  
      locationGroup: this.fb.group({
          country: [null, Validators.compose([Validators.required])],
          city: [null, Validators.compose([Validators.required])],
      }),
  
  });
  
  public onRegistrationFormSubmit(): void {
      this.registrationForm.reset({ onlySelf: false });
  }
  
  public showValues(): void {
      console.log('values: ', this.registrationForm.value);
  }
  </code></pre></li>
  </ul>
  
  <p><strong>My custom 'location picker'</strong></p>
  
  <ul>
  <li><p>location-picker.component.html</p>
  
  <pre><code>&lt;mat-form-field appearance="standard"&gt;
      &lt;mat-label&gt;{{label}}&lt;/mat-label&gt;
      &lt;mat-select [disabled]="disabled"
        (selectionChange)="onChange($event.value)"&gt;
          &lt;mat-option [value]="null"&gt;...&lt;/mat-option&gt;
          &lt;mat-option *ngFor="let location of locations"
              [value]="location.code"&gt;
              {{location.name}} ({{location.code}})
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre></li>
  <li><p>location-picker.component.ts</p>
  
  <pre><code>@Component({
      ...
      providers: [{
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() =&gt; LocationPickerComponent),
          multi: true }]
  })
  export class LocationPickerComponent implements ControlValueAccessor {
      @Input() public label: string;
      @Input() public locations: string[];
  
      selectedOption: string;
      disabled: boolean;
      onChange = (val: any) =&gt; { };
      onTouched = () =&gt; { };
  
      writeValue(val: string): void {
          console.log('writeValue:', val);
          this.selectedOption = val ? val : null;
      }
      setDisabledState?(isDisabled: boolean): void {
          this.disabled = isDisabled;
      }          
      registerOnChange(fn: () =&gt; void): void {
          this.onChange = fn;
      }
      registerOnTouched(fn: () =&gt; void): void {
          this.onTouched = fn;
      }
  }
  </code></pre></li>
  </ul>
  
  <p>The onRegistrationFormSubmit() method effectively resets the whole form.
  <br>
  After I check the form's model with showValues(), I can see that all the fields of locationGroup are null.
  <br>
  HOWEVER, the UI of my custom location-picker doesn't update (doesn't show the three dots) despite of the fact, that the writeValue method is called.
  <br>
  All the other fields of the form are reset back to their respective values, except my custom formControl fields (countries and cities mat-select).</p>
  
  <p><br>
  Here's a <a href="https://stackblitz.com/edit/custom-formcontrol-update?file=src/app/app.component.ts" rel="nofollow noreferrer">Stackblitz example</a>.</p>