ngModel complains when used with @defer

[ssougnez]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

Say we have a component with a form.
One of the field is a cutstom component implementing ControlValueAccessor.
This component uses ngModel without ngModelOptions (which might be a bad practice, but it works).
When the component hosting the form is used without @defer, it works as expected, but as soon as it is used in a @defer block, the error "ngModel cannot be used to register form controls with a parent formGroup directive." is thrown.

I'm not sure whether it's a bad practice or not to use ngModel without ngModelOptions in that scenario but I think the behavior should be consistent whether you use @defer or not. Either it should fail every time or works every time.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-17-starter-project-egsglm

Please provide the exception or error you saw

Simply remove the @defer/@placeholder from the stackblitz to enable/disable the error.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.3
Node: 20.11.1
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 17.2.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.2
@angular-devkit/build-angular   17.2.2
@angular-devkit/core            17.2.3
@angular-devkit/schematics      17.2.3
@schematics/angular             17.2.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

[AndrewKushnir]

@ssougnez thanks for reporting the issue and providing a repro. The issue might be related to #54864 and we are working on a fix. While working on a fix for #54864, we can put together a test that would check Forms behavior as well. Will keep this thread updated once we make more progress.

[ssougnez]

Okay thanks.

And just out of curiosity, is it a bad practice to have a component using ngModel for just one two-way binding without using ngModelOptions?

It never occurred to me so I was not doing it but now that I'm facing this issue, I'm wondering whether I should start using ngModelOptions in these cases.

[AndrewKushnir]

Quick update: I've confirmed that the root cause of this issue is the same as the one from #54864. We are working on a fix and will keep this thread updated once the fix is available.

And just out of curiosity, is it a bad practice to have a component using ngModel for just one two-way binding without using ngModelOptions?

If you do not rely on that <input> to act as a part of a larger form (and only used to sync a value between an input and a class field), you may consider using the ngModelOptions.standalone flag.

It never occurred to me so I was not doing it but now that I'm facing this issue, I'm wondering whether I should start using ngModelOptions in these cases.

The issue was caused by the bug in Angular's code, adding @defer should not cause the error in your scenario.

[AndrewKushnir]

Quick update: the fix for this issue was merged and released as a part of Angular v17.3.2 (available on NPM). Please let us know if you still see the issue after updating to v17.3.2.

[ssougnez]

I already updated my code to use ngModelOptions, however, I tried this version on the failing stackblitz and I can reproduce the issue so I guess it is correctly fixed :-)

Thanks for the quick action.

[angular-automatic-lock-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.}