Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

writeValue gets called before ngOnInit

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package `@angular/forms`

Is this a regression?

I don’t know. I don’t think so.

Description

When NgControl is injected into the constructor of a component and the value accessor is set manually to avoid cyclic dependency errors, writeValue is called before ngOnInit. This workaround is suggested by the Material Angular doc under ngControl.

🔬 Minimal Reproduction

Stackblitz

🌍 Your Environment

Angular Version:


Angular CLI: 7.3.5
Node: 11.9.0
OS: win32 x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.5
@angular-devkit/build-angular     0.13.5
@angular-devkit/build-optimizer   0.13.5
@angular-devkit/build-webpack     0.13.5
@angular-devkit/core              7.3.5
@angular-devkit/schematics        7.3.5
@angular/cdk                      7.3.3
@angular/cli                      7.3.5
@angular/material                 7.3.3
@angular/pwa                      0.13.5
@ngtools/webpack                  7.3.5
@schematics/angular               7.3.5
@schematics/update                0.13.5
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

I was sent here by the @angular/material2 team. They believe it’s an issue with @angular/forms. https://github.com/angular/material2/issues/15434

Issue Analytics

State:
Created 5 years ago
Reactions:35
Comments:18 (7 by maintainers)

Top GitHub Comments

6reactions

rahul-sharma-uipathcommented, Aug 22, 2019

For the NgControl case, this is not behaviorally consistent. If you use NG_VALUE_ACCESSOR for the control value accessor, then ngOnInit is called before writeValue, whereas with the new way that @romansattler pointed out, ngOnInit is called after writeValue. This is likely where he discovered the bug and definitely caused us a lot of headaches as well.

stackblitz

5reactions

grajeshg2000commented, Jul 28, 2020

The bug reproduction code is using angular/forms and angular/material libraries. I have removed the material related code from reproduction code, Bug is still coming. So this problem is not because of material library, instead the problem is in angular/form. Now I am debugging angular form to find out the problem.

Top Results From Across the Web

Writevalue Called Before Ngoninit In Nested ... - StackBlitz

Starter project for Angular apps that exports to the Angular CLI.

controlValueAccessor method writeValue() not being called

writeValue is called when you are changing control value (eg by setting backing ngModel property or controll value) not by user input.

Angular Custom Form Controls - Complete Guide

The writeValue method is called by the Angular forms module whenever the parent form wants to set a value in the child control....

Control Value Accessor: Custom Form Components in Angular

writeValue is called when the FormControl value is changed programmatically, like when you call FormControl.setValue(x) . It can receive anything, ...

Better Angular Form Components with ngModel and ...

Angular always looks for an onInit function and tries to call it when the ... and manually check for updates in the writeValue...