bug(dialog): custom reactive form control in a dialog created with ng-template throw error

[nzbin]

trafficstars

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v13

Description

The custom reactive form control in a dialog created with ng-template will throw the following error:

Error: NG01350: ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead

Reproduction in StackBlitz

It has no problems in v12 and v13.

Reproduction

Steps to reproduce:

1. create a custom form control using ngModel
2. create a dialog with ng-template and a reactive form
3. open the dialog

Expected Behavior

Don't throw errors.

Actual Behavior

Throw the error NG01350.

Environment

• Angular: 14.1.3
• CDK/Material: 14.1.3
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu):

[maykonpacheco]

I'll try to solve this issue

[andrybany]

I'll try to solve this issue

Any news?

[mishahrokhola]

I have the same issue, but in my case, I used cdk/dialog

[Lerado]

Same issue here. This is a real problem because I'm using a vendor component I try to inject in a MatDialog. I can't really change that behavior.

[Lerado]

This is so annoying. I strongly think the most reusable way of embedding pure components in dialogs is using ng-templates.

Please let us know if there is anything we can do to provide some support on this issue. @maykonpacheco

[mishahrokhola]

It seems like the problem has been fixed in angular 16 with this PR

[Lerado]

It seems like the problem has been fixed in angular 16 with this PR

I think that is possible. Especially with the new reactivity model.