ng 11: patchValue, valueChanges & async pipe

🐞 bug report

I don’t know if this is a bug or feature.

• I have AbstractControl for the input field on which I want to listen to valueChanges with async pipe.
• It works fine if user write to the input field async pipe work
• If I programatacly patch value then async pipe doesn’t work
• code ts:

searchForm: FormGroup;
...
ngOnInit(): void {
    this.initSearchForm();

    this.navigateBack = this.route.snapshot.queryParams.back;
    if (this.navigateBack && this.navigateBack === 'true') {
      this.orgCtrl.patchValue(null);
      // this.orgCtrl.setValue(this.orgStorage.getSearchKey(), { emitEvent: false, onlySelf: true });
      this.orgCtrl.setValue(this.orgStorage.getSearchKey());
      this.result$ = of(this.orgStorage.getSearchResult());
    }
  }

get orgCtrl(): AbstractControl { return this.searchForm.get('org'); }

private initSearchForm(): void {
    this.searchForm = this.formBuilder.group({ org: '' });
    this.result$ = this.orgCtrl.valueChanges
      .pipe(
        filter(v => v.length >= 3),
        tap(v => console.log(v)),
        switchMap(v => this.search(v))
      );
  }

• HTML code:

<div *ngIf="orgCtrl?.valueChanges | async">
    <p *ngFor="let r of result$ | async">
        {{r.name}}
    </p>
</div>

Affected Package

• @angular/forms
• @angular/core

Is this a regression?

I don’t know it is a fresh projcet with ng 11

Description

• When pectValue with a reactive form async pipe doesn’t detected valueChanges.

🔬 Minimal Reproduction

🔥 Exception or Error

There is no error in the browser dev console.

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 12.6.0
OS: win32 x64

Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

[Totati]

Hi, we use a helper valuesOf function, that wraps the AbstractControl if we want to have an observable stream with the current value at subscription. In the template using just ctrl.valueChnages | async is a bit overkill, and most of the time can be replaced with a simple ctrl.value. If you want to pipe the valueChanges, then using valuesOf is even less code. Example

export function valuesOf(control: AbstractControl): Observable<any>;
export function valuesOf<T>(control: AbstractControl): Observable<T | null>;
export function valuesOf(control: AbstractControl): Observable<any> {
  return defer(() => control.valueChanges.pipe(startWith(control.value)));
}

[petebacondarwin]

OK, so it appears to be a problem with timing. If you create the form in ngOnInit() but then do the patchValue() call in ngAfterViewInit() then it works: https://stackblitz.com/edit/angular-ivy-6jxkwu?file=src%2Fapp%2Fapp.component.ts