Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

NgControl.control is undefined when injected #32522

Closed
jessejohnsohn opened this issue Sep 7, 2019 · 2 comments

Comments

@jessejohnsohn
Copy link

@jessejohnsohn jessejohnsohn commented Sep 7, 2019

馃悶 bug report

Affected Package

The issue looks to come from @angular/forms when the `enableIvy` flag is set to true.

Is this a regression?

Yes, this works as expected with the `enableIvy` flag set to false.

Description

Injecting NgControl into a component that implements the ControlValueAccessor shows up with an undefined control property only when the enableIvy flag is set to true in tsconfig.json.

With enableIvy set to false, the "control" property exists on the injected NgControl object and is populated with the appropriate FormControl instance.

馃敩 Minimal Reproduction

https://github.com/jessejohnsohn/possible-ivy-bug

Run the application and view the browser console. A FormControl instance will be logged, coming from full-name.component.ts:25.

Go into the application's tsconfig.json file and change "enableIvy" to true. Stop the local dev server and restart it.

Now load the application and view the browser's console. Where the FormControl instance was logging before will now say undefined.

馃實 Your Environment

Angular Version:




Angular CLI: 8.2.2
Node: 10.16.0
OS: win32 x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.2
@angular-devkit/build-angular     0.802.2
@angular-devkit/build-optimizer   0.802.2
@angular-devkit/build-webpack     0.802.2
@angular-devkit/core              8.2.2
@angular-devkit/schematics        8.2.2
@angular/cli                      8.2.2
@ngtools/webpack                  8.2.2
@schematics/angular               8.2.2
@schematics/update                0.802.2
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

Anything else relevant?

This is on the latest version of Chrome.

Windows computer.

@benelliott

This comment has been minimized.

Copy link
Contributor

@benelliott benelliott commented Nov 4, 2019

This also results in NgControl.statusChanges etc being null. This is a major blocker for us updating to Ivy.

@IgorMinar

This comment has been minimized.

Copy link
Member

@IgorMinar IgorMinar commented Nov 9, 2019

I was able to repro this with rc.1

The odd thing is that the NgControl has a different shape with Ivy than without:

enableIvy: false:
Screen Shot 2019-11-08 at 5 56 02 PM

enableIvy: true:
Screen Shot 2019-11-08 at 5 55 48 PM

Notice that the control prop is missing with Ivy and that the object has __ngContext__ and __ngSimpleChanges__ props. Is this expected?

@IgorMinar IgorMinar modified the milestones: Backlog, v9-blockers Nov 9, 2019
@mhevery mhevery assigned mhevery and kara and unassigned mhevery Nov 11, 2019
kara added a commit to kara/angular that referenced this issue Nov 25, 2019
This commit fixes a compatibility bug where pre-order lifecycle
hooks (onInit, doCheck, OnChanges) for directives on the same
host node were executed based on the order the directives were
matched, rather than the order the directives were instantiated
(i.e. injection order).

This discrepancy can cause issues with forms, where it is common
to inject NgControl and try to extract its control property in
ngOnInit. As the NgControl directive is injected, it should be
instantiated before the control value accessor directive (and
thus its hooks should run first). This ensures that the NgControl
ngOnInit can set up the form control before the ngOnInit
for the control value accessor tries to access it.

Closes angular#32522
matsko added a commit that referenced this issue Nov 25, 2019
This commit fixes a compatibility bug where pre-order lifecycle
hooks (onInit, doCheck, OnChanges) for directives on the same
host node were executed based on the order the directives were
matched, rather than the order the directives were instantiated
(i.e. injection order).

This discrepancy can cause issues with forms, where it is common
to inject NgControl and try to extract its control property in
ngOnInit. As the NgControl directive is injected, it should be
instantiated before the control value accessor directive (and
thus its hooks should run first). This ensures that the NgControl
ngOnInit can set up the form control before the ngOnInit
for the control value accessor tries to access it.

Closes #32522

PR Close #34026
@matsko matsko closed this in 1a0ee18 Nov 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.