ValueAccessor.writeValue is being called twice, first time with a phantom null value #14988

alexi2014 · 2017-03-07T17:36:04Z

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
The ValueAccessor.writeValue method is called twice on a custom value accessor during component initialization, when a control is bound using [(ngModel)], first time with a phantom null value.

Note that this is not an issue in form builder scenarios when control is bound using [formControlName].

Expected behavior
ValueAccessor.writeValue should be called only once, with an actual value of the property bound to [(ngModel)].

Minimal reproduction of the problem with instructions
Run the following plunker:
http://plnkr.co/edit/g5kjqQ9bQ9DF2cs4DbEH?p=preview

MyValueAccessor is applied to the MyCmp component, the latter is bound using [(ngModel)] to the property initialized to 'Hello'. MyValueAccessor.writeValue writes the passed value to the console, the output looks as follows:

MyValueAccessor.writeValue: null
MyValueAccessor.writeValue: Hello

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Angular version: RC.4 - 2.4.9

Browser: Chrome, IE11

Language: TypeScript
Node (for AoT issues): node --version =

The text was updated successfully, but these errors were encountered:

alexi2014 · 2017-03-07T20:39:37Z

I don't understand how this relates to synchronous or asynchronous. ngModel is bound to a property declared as
theValue = 'Hello';
, but receives a null on initialization. If theValue never has a null value, why null is passed to the accessor?

alexi2014 · 2017-03-15T11:37:06Z

@IgorMinar Thanks Igor. When do you think it could be fixed?

DzmitryShylovich · 2017-03-15T11:54:18Z

why null is passed to the accessor?

because FormControl is initialized with null value. Just add a check if (obj != null) {}

alexi2014 · 2017-03-15T12:47:39Z

Yes, and this check will break initialization in reactive forms scenario, where this "phantom" null is not passed.

DzmitryShylovich · 2017-03-15T12:58:40Z

how it will break initialization in reactive forms scenario?

alexi2014 · 2017-03-15T13:22:44Z

If initial value of a bound property is null, the if (obj != null) check you suggested will ignore this assignment and not propagate it to the control where ValueAccessor is applied to.

DzmitryShylovich · 2017-03-15T13:29:16Z

Ok I see how to fix it but they don't merge fixes until v4 release :)

alexi2014 · 2017-03-15T13:33:47Z

@DzmitryShylovich Why do you think it can't fixed in v2?

DzmitryShylovich · 2017-03-15T13:43:15Z

it will be fixed in 2.x but the fix will be available after v4 release

alexi2014 · 2017-03-15T13:45:46Z

I see, thanks for the clarification. It's better then nothing anyway:)

CSchulz · 2017-04-27T07:50:12Z

It is the same in Angular 4.1.0:
http://plnkr.co/edit/cOHEHCu55X2MNEUxBhou?p=preview

myagoo · 2017-08-04T13:03:04Z

What is the status on this ?

dpxxdp · 2017-11-03T12:29:56Z

This is an open issue for us too. @DzmitryShylovich, any status on this?

anjmao · 2017-11-19T13:25:43Z

Any news on this issue? I'm creating custom component and for my case it is very important to do some logic on first writeValue call, but since only second writeValue call is giving real value this is a big issue :)

mofogasy · 2018-03-09T08:35:42Z

Problem still exists in Angular 5.2.1.

Any news on that? Is this by design?

jcimoch · 2018-03-19T17:41:04Z

Still present in latest angular version.

mvsrinivasan · 2018-06-09T20:48:20Z

This is still an issue.

I have a nested user control
form

Form component :
<partsList [(ngModel)]="partsList">

PartsList Component :
`<div *ngFor="let p of parts;let i=index">
<part name="part-{{i}}" [(ngModel)]="parts[i]">

`

Part Component has [(ngModel)]="part.quantity"

When writeValue is first called with null, I can put a safety band aid around it to check for null inside the part component.But the template engine screws up the [(ngModel)]= "part.quantity" and complains about "Cannot read property 'quantity' of undefined".

ckelley7 · 2018-06-11T18:34:00Z

This bug is ruining my marriage. Please fix. I know. I'm not worthy.

RoyiNamir · 2018-06-11T18:44:18Z

@ckelley7 You can check for null value

http://plnkr.co/edit/UNYbyNK609F9o2vOtzRy?p=preview

 writeValue(obj: any): void {
    
    if (obj!=null){
    
    console.log(`MyValueAccessor.writeValue: ${obj}`);
    }
  }

Until it's fixed. At lest you won't get exception.

mvsrinivasan · 2018-06-11T19:35:56Z

@RoyiNamir : Thanks for the suggestion, but this won't help the errors encountered if you reference your innerValue in your template.

My component template has
<input [(ngModel)]="innerValue.quantity"/>

The template engine still tries to navigate to innerValue.quantity with this error
ERROR TypeError: Cannot read property 'quantity' of undefined

RoyiNamir · 2018-06-11T19:42:20Z

@SV-efi Have you tried wrapping it with a Form tag? as this will cause initialization to be schedule :

problematic : https://plnkr.co/edit/fOL57Hjw2PAOx6WXh36t?p=preview

Solution : https://plnkr.co/edit/5Ez9VgN0yNz7QaF7DMck?p=preview

`ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if an optional flag is given. Fixes angular#14988

N2D4 · 2020-07-19T23:12:48Z

#38140 fixes this. Hope your marriage is alright, @ckelley7! 🙏

(Quick edit: I just want to mention that this only fixes the bug that null was sometimes passed during initialization, and doesn't prevent you from calling .reset(), which sets the value of the control to null by design.)

`ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if the value is a special sentinel value indicating it has not yet been initialized. Fixes angular#14988

mohamedelshorbagy · 2020-07-20T12:33:37Z

Until the bug fix is merged for people who still have this problem and the problem for calling writeValue when using setValue or patchValue.
ControlValueAccessor extended component don't ever try to use setValue or patchValue in passed formControl always try to keep the changes of the formControl value through onChange method and if you have to listen to valueChanges for example and you setValue inside it try to have another Subject or BehaviourSubject to lock the valueChanges & writeValue if you are setting the value of the FormControl.

`ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if an optional flag is given. Fixes angular#14988 fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null revert: "fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null" This reverts commit 0babb27. fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null fix(forms): ValueAccessor.writeValue(...) sometimes called with null `ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if the value is a special sentinel value indicating it has not yet been initialized. Fixes angular#14988 fix(forms): ValueAccessor.writeValue(...) sometimes called with null `ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if the value is a special sentinel value indicating it has not yet been initialized. Fixes angular#14988 fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null revert: "fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null" This reverts commit f0978db. revert: "fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null" This reverts commit f0978db. fixup! fix(forms): ValueAccessor.writeValue(...) sometimes called with null

`ValueAccessor.writeValue(...)` is called twice on the very first `ngModel` change if the form has not yet been set up; once by `setUpControl` and once when the value is actually updated. However, because `setUpControl` is called before the value is set, the first call passes `null`. The bug is most common for standalone form controls which are never set up before the first `ngModel` change but may also happen if any other form control is not added to its parent first by calling `NgForm.addControl(...)`. Fix that by optionally skipping the `writeValue(...)` call in `setUpControl` if an optional flag is given. Fixes angular#14988

Twynzen · 2020-11-04T23:25:24Z

I come from the future, it's a bad year. This bug has not been fixed yet. They say to create a condition to detect if the "writeValue" is null. But "writeValue" belongs to the nodeModules, therefore go to "@angular/forms" and modify it, it seems a very bad idea. That I understood. Explain to me if I'm wrong. Sorry for my english, i speak spanish.

ckelley7 · 2020-11-06T01:38:44Z

I come from the future, it's a bad year. This bug has not been fixed yet. They say to create a condition to detect if the "writeValue" is null. But "writeValue" belongs to the nodeModules, therefore go to "@angular/forms" and modify it, it seems a very bad idea. That I understood. Explain to me if I'm wrong. Sorry for my english, i speak spanish.

Tu inglés es lo suficientemente bueno como para hacer reír a carcajadas a un hablante nativo, Daniel. Creo que lo que están sugiriendo es modificar el método ValueAccessor.writeValue de su control personalizado para detectar nulo y hacer lo necesario. Me he equivocado antes.

nullifiedtsk · 2020-12-07T07:49:30Z

Any progress on this?
Stuck with the same thing, the value produced once for non-standalone controls, but for standalone controls always emits null first. As workaround i am started to use formControls instead of ngModel bindings, but it just makes code complicated.

kagan94 · 2021-03-29T12:13:20Z

I also faced with same issue when using [(ngModel)]="myValue" and changeDetection: ChangeDetectionStrategy.OnPush in parent component.

In my case, the second call of writeValue with real value didn't re-render the view, so I applied following temporary workaround
(to run change detector after setting value in writeValue):

  constructor(private changeDetection: ChangeDetectorRef) {
  }

  ...

  public writeValue(obj: any) {
    this.selected = obj;
    this.changeDetection.markForCheck();
  }

jforjava1981 · 2021-04-24T15:40:05Z

https://stackoverflow.com/questions/39835811/ngmodel-binding-is-null-in-oninit-in-angular-2
@N2D4 is this issue related to question asked in above link?
If not Is there a way I can somehow initialise the value in my custom component using ngcontrolvalueaccessor with [(ngModel)]?

afusa · 2021-04-29T11:06:29Z

This is getting ridiculous now. When is this getting fixed ?

SadeemGxG · 2021-08-14T22:31:02Z

So is there any progress?

stewx · 2021-08-24T12:10:23Z

@maxime1992 There is already an open PR, wise guy. It's been open for over a year: #38140

luketanner · 2022-02-05T05:27:20Z

@maxime1992 There is already an open PR, wise guy. It's been open for over a year: #38140

@stewx Well, even-wiser-guy, now that PR is closed and this bug remains unfixed after FIVE years.

Expertus777 · 2022-06-06T19:21:23Z

How to fix it simple and properly?

My solution at the moment is just wrap the myValue from [(ngModel)]="myValue" in setTimeout '0' like:

setTimeout(() => {
this.myValue= someFetchData;
}, 0)

Another solution I found is to add *ngIf directive to <input *ngIf="myValue" [(ngModel)]="myValue"> something like that. But I think I'll stick to the first one.

Would be glad to hear some better solution is any.

martynas9 · 2022-11-10T14:58:41Z

In my case. I've noticed that first writeValue with a null value is called before registerOnChange is called, and then, the writeValue is called with the real value again.

So my workaround for this bug was this:

Create class property for onChange but don't assign a value to it:

onChange: (value: unknown) => void;

Then on registerOnChange we assign a function to onChange property:

  registerOnChange(fn: (value: unknown) => void): void {
    this.onChange = fn;
  }

And check if onChange is set in writeValue function:

writeValue(value: unknown): void {
    if(this.onChange) {
      // your code here
    }
  }

Maybe it will be helpful for someone.

william-fargues · 2023-01-16T23:17:42Z

Hey Angular team, I've had time to start a family, see my children grow up, graduate and learn React instead of Angular just to avoid this bug, do you think this is normal?

amitbeck · 2023-01-17T10:00:50Z

Wasn't this solved by using the nonNullable (which replaced the deprecated initialValueIsDefault) property of FormControlOptions?

ayubUOL · 2023-01-19T19:11:48Z

I'm using Reactive forms on different pages but this issue only occur in One page and code is similar. I've no clue why i'm facing this only on one page. Can anyone help me ? how to solve this

IgorMinar added area: forms type: bug/fix labels Mar 13, 2017

dxvladislavvolkov mentioned this issue Mar 15, 2017

DxTextBox. Dirty is set by default DevExpress/devextreme-angular#370

Closed

trotyl mentioned this issue Apr 27, 2017

Validators should not called during view init #16346

Closed

RodolpheGohard mentioned this issue Dec 1, 2017

TagsInputComponent.html:20 ERROR TypeError: Cannot read property 'length' of null Sonaryr/ngx-tags-input#1

Closed

mhevery added freq2: medium severity3: broken labels Dec 19, 2017

ngbot bot added this to the Backlog milestone Jan 23, 2018

RoyiNamir mentioned this issue Apr 3, 2018

Angular's ControlValueAccessor has a null initial value causing "Cannot read property 'a' of null" ? NativeScript/nativescript-angular#1262

Closed

N2D4 mentioned this issue Jul 19, 2020

fix(forms): ValueAccessor.writeValue(...) sometimes called with null #38140

Closed

14 tasks

jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020

AndrewKushnir mentioned this issue Jan 14, 2021

There is always a leading null value on writeValue hook when using ngModel #40425

Closed

UserGalileo mentioned this issue Oct 28, 2021

ControlValueAccessor with default value #43718

Closed

sean-perkins mentioned this issue Dec 14, 2021

fix(angular): defer control value accessor write until after hydration ionic-team/ionic-framework#24401

Closed

13 tasks

nsbarsukov mentioned this issue Feb 18, 2022

fix(kit): Slider change detection problem with [(ngModel)] Tinkoff/taiga-ui#1425

Merged

11 tasks

AndrewKushnir removed the triage #1 label Mar 15, 2022

ValueAccessor.writeValue is being called twice, first time with a phantom null value #14988

ValueAccessor.writeValue is being called twice, first time with a phantom null value #14988

alexi2014 commented Mar 7, 2017

alexi2014 commented Mar 7, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

CSchulz commented Apr 27, 2017

myagoo commented Aug 4, 2017

dpxxdp commented Nov 3, 2017

anjmao commented Nov 19, 2017

mofogasy commented Mar 9, 2018

jcimoch commented Mar 19, 2018

mvsrinivasan commented Jun 9, 2018 •

edited

ckelley7 commented Jun 11, 2018

RoyiNamir commented Jun 11, 2018

mvsrinivasan commented Jun 11, 2018

RoyiNamir commented Jun 11, 2018

N2D4 commented Jul 19, 2020 •

edited

mohamedelshorbagy commented Jul 20, 2020

Twynzen commented Nov 4, 2020 •

edited

ckelley7 commented Nov 6, 2020

nullifiedtsk commented Dec 7, 2020

kagan94 commented Mar 29, 2021 •

edited

jforjava1981 commented Apr 24, 2021

afusa commented Apr 29, 2021

SadeemGxG commented Aug 14, 2021

stewx commented Aug 24, 2021 •

edited

luketanner commented Feb 5, 2022

Expertus777 commented Jun 6, 2022 •

edited

martynas9 commented Nov 10, 2022

william-fargues commented Jan 16, 2023

amitbeck commented Jan 17, 2023 •

edited

ayubUOL commented Jan 19, 2023

ValueAccessor.writeValue is being called twice, first time with a phantom null value #14988

ValueAccessor.writeValue is being called twice, first time with a phantom null value #14988

Comments

alexi2014 commented Mar 7, 2017

alexi2014 commented Mar 7, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

DzmitryShylovich commented Mar 15, 2017

alexi2014 commented Mar 15, 2017

CSchulz commented Apr 27, 2017

myagoo commented Aug 4, 2017

dpxxdp commented Nov 3, 2017

anjmao commented Nov 19, 2017

mofogasy commented Mar 9, 2018

jcimoch commented Mar 19, 2018

mvsrinivasan commented Jun 9, 2018 • edited

ckelley7 commented Jun 11, 2018

RoyiNamir commented Jun 11, 2018

mvsrinivasan commented Jun 11, 2018

RoyiNamir commented Jun 11, 2018

N2D4 commented Jul 19, 2020 • edited

mohamedelshorbagy commented Jul 20, 2020

Twynzen commented Nov 4, 2020 • edited

ckelley7 commented Nov 6, 2020

nullifiedtsk commented Dec 7, 2020

kagan94 commented Mar 29, 2021 • edited

jforjava1981 commented Apr 24, 2021

afusa commented Apr 29, 2021

SadeemGxG commented Aug 14, 2021

stewx commented Aug 24, 2021 • edited

luketanner commented Feb 5, 2022

Expertus777 commented Jun 6, 2022 • edited

martynas9 commented Nov 10, 2022

william-fargues commented Jan 16, 2023

amitbeck commented Jan 17, 2023 • edited

ayubUOL commented Jan 19, 2023

mvsrinivasan commented Jun 9, 2018 •

edited

N2D4 commented Jul 19, 2020 •

edited

Twynzen commented Nov 4, 2020 •

edited

kagan94 commented Mar 29, 2021 •

edited

stewx commented Aug 24, 2021 •

edited

Expertus777 commented Jun 6, 2022 •

edited

amitbeck commented Jan 17, 2023 •

edited