extensions icon indicating copy to clipboard operation
extensions copied to clipboard

Problem with reactive mtx-select inside an ng-template mat-dialog

Open andreanaFelicione opened this issue 2 years ago • 8 comments

I have a component mtx-select inside an ng-template that contains a mat-dialog, and when I open the dialog I have in console the error message:

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

My mtx-select is in a reactive form, so there is no attribute "ngModel" in my form.

How can I resolve this issue?

andreanaFelicione avatar Aug 04 '22 15:08 andreanaFelicione

The error is clear. You should use formControlName instead of ngModel https://angular.io/api/forms/FormControlName#register-formcontrol-within-a-group

nzbin avatar Aug 05 '22 05:08 nzbin

As I said, I already use formControlName and the term ngModel does not appear anywhere in my code.

I take this opportunity to reiterate that the problem occurs only when the form is contained within a mat-dialog opened via ng-template with dialog.open(myTemplateReference); if the same form is inserted in an open mat-dialog using a component with dialog.open(myDialogComponent); the problem does not arise.

andreanaFelicione avatar Aug 05 '22 10:08 andreanaFelicione

Can you provide an online demo?

nzbin avatar Aug 05 '22 10:08 nzbin

Sorry for the late reply, but I was on vacation. I created a sample demo here where the error is visible in Test3. There is a bug on the display of dialogs that I could not solve in the example, please do not pay attention to it.

andreanaFelicione avatar Aug 16 '22 15:08 andreanaFelicione

Thanks for your demo, I tested this issue and I found it has no problem in v12 and v13. I'm not sure if this is a bug of material in v14. I will test it again and try to fix it.

nzbin avatar Aug 19 '22 01:08 nzbin

Is there any news?

andreanaFelicione avatar Aug 25 '22 11:08 andreanaFelicione

I have submitted the issue to material. https://github.com/angular/components/issues/25515

nzbin avatar Aug 25 '22 12:08 nzbin

Ok thanks. In the meantime so i could go back to version 13 of material to avoid the error occurring? Can you confirm that the error does not occur with 13? In my project I have many points where I use ngTemplate and I need a solution in a short time. I don't know how long it will take material developers to fix the bug...

andreanaFelicione avatar Aug 25 '22 12:08 andreanaFelicione

I have fixed this issue by myself, but I‘m not sure if there has some other side effects. You can try the new version 14.4.1.

nzbin avatar Oct 20 '22 07:10 nzbin