Custom form control (ControlValueAccesor) doesn't make parent run change detection

🐞 bug report

Affected Package

angular/forms

Description

I’ve created a custom file dropzone which should work correctly with ReactiveFormsModule. The problem is that after I’ve added a file, the control’s parent (the form component) isn’t being updated. According to the valueChanges Observable, the value is being emitted correctly.

<form
    (ngSubmit)="onSubmit()"
    [formGroup]="form"
>
    {{ form.value.file }} <-- this isn't updated until I drop a second file, then it always shows the previous file
<div
        fileDropzone
        formControlName="file"
    ></div>
</form>

I’ve noticed that if I add a custom event on the control, everything works correctly, but I shouldn’t have to do that.

<form
    (ngSubmit)="onSubmit()"
    [formGroup]="form"
>
    {{ form.value.file }} <-- This updates correctly when listening to any custom event on the control
<div
        fileDropzone
        (changed)="onChange($event)"
        formControlName="file"
    ></div>
</form>

I assumed the problem might be OnPush change detection, but even after removing it, the problem persists.

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.8
Node: 8.10.0
OS: win32 x64
Angular: 7.2.13
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.8
@angular-devkit/build-angular      0.13.8
@angular-devkit/build-optimizer    0.13.8
@angular-devkit/build-webpack      0.13.8
@angular-devkit/core               7.3.8
@angular-devkit/schematics         7.3.8
@angular/cdk                       7.3.7
@angular/cli                       7.3.8
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/webpack                   7.3.8
@schematics/angular                7.3.8
@schematics/update                 0.13.8
rxjs                               6.4.0
typescript                         3.2.2
webpack                            4.29.0

[trotyl]

Duplicate of https://github.com/angular/angular/issues/21780

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}