Why does my matDialog not render correctly with Angular v15?

Question

so recently I updated my project to version 15 of Angular. I followed the guide from the official Angular documents, however, ever since I removed my entryComponents, my MatDialog does not open correctly. I have since also transformed every component I had to standalone. Everything up to the Dialog components works.

In my console I only get the error "Cannot read properties of undefined (reading 'errorState')". However, even removing and creating a fully new MatDialog component does not seem to remove this error. Does anyone know how I can fix this? I really do not know from where this could come from :?

TS Button to open Dialog:
openAddPhonenumberDialog() {
    const dialogRef = this.dialog.open(AddPhonenumberComponent, {
      minWidth: "300px",
      autoFocus: false,
    });
}

TS PhonenumberComponnet
Component({
  selector: "app-add-phonenumber",
  templateUrl: "./add-phonenumber.component.html",
  styleUrls: ["./add-phonenumber.component.css"],
  standalone: true,
  imports: [
    MatDialogModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatOptionModule,
    NgIf,
    MatButtonModule,
  ],
})

HTML PhonenumberComponent
<h2 mat-dialog-title>Add a new phonenumber</h2>
<form [formGroup]="addPhonenumberForm" (ngSubmit)="onAddNewPhonenumber()">
    <mat-dialog-content style="display:flex;flex-direction: column;">
        <mat-form-field>
            <mat-label>Phonenumber</mat-label>
            <input matInput formControlName="phonenumber" type="tel" required 
                (input)="formatInput()">
        </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button [mat-dialog-close] (click)="close()">Close</button>
        <button type="submit" mat-button [mat-dialog-close]="result" >Save</button>  
    </mat-dialog-actions>
</form>

My package.json:

    "@angular-devkit/core": "^16.1.8",
    "@angular-devkit/schematics": "^16.1.8",
    "@angular/animations": "~15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "~15.2.9",
    "@angular/compiler": "~15.2.9",
    "@angular/core": "~15.2.9",
    "@angular/forms": "~15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "~15.2.9",
    "@angular/router": "~15.2.9",
    "@types/gapi.client.drive": "^3.0.8",
    "angular-in-memory-web-api": "^0.9.0",
    "bootstrap": "^4.4.1",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "moment": "^2.26.0",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.5",
    "tslib": "^2.0.0",
    "xstate": "~4.6.7",
    "zone.js": "~0.11.8"
  },

Picture of how it looks like right now:

Answer 1

Replace your code with below method :

    <div mat-dialog-content style="display:flex;flex-direction: column;">
        <mat-form-field>
            <mat-label>Phonenumber</mat-label>
            <input matInput formControlName="phonenumber" type="tel" required 
                (input)="formatInput()">
        </mat-form-field>
    </div>
    <div mat-dialog-actions>
        <button mat-button [mat-dialog-close] (click)="close()">Close</button>
        <button type="submit" mat-button [mat-dialog-close]="result" >Save</button>  
    </div>

I have use div tag and use mat-dialog-content & mat-dialog-actions as a attribute. I my case same problem solve with this way.

Answer 2

The error message you've mentioned "Cannot read properties of undefined (reading 'errorState')" is typically linked with Angular forms and Material components. It may point to issues with form controls or mismatches between Angular versions and Angular Material versions.

To troubleshoot and potentially resolve this issue, you can follow these steps:

1. Ensure Dependencies Match: Make sure that your Angular and Angular Material versions match closely. Mismatching versions can introduce incompatibility issues. Your package.json indicates you're using Angular version 15.2.9 and Angular Material version 15.2.9, which seem to match. However, there are some inconsistencies with other packages (like @angular-devkit/core and @angular-devkit/schematics being at version 16.1.8). You might want to correct these disparities.

2. FormGroup Initialization: Ensure that your addPhonenumberForm FormGroup is initialized properly in your component's TypeScript file. If the form group or form controls are not correctly initialized, this can cause the error you're seeing.

typescript

addPhonenumberForm: FormGroup;

constructor(private fb: FormBuilder) {
    this.addPhonenumberForm = this.fb.group({
        phonenumber: ['', Validators.required]
    });
}

3. Check if All Modules are Imported Properly: You've added Angular modules to the component metadata, which is not a typical approach in Angular. Normally, you should import required Angular modules in your application's feature or shared module. The component metadata shouldn't have an imports property.

In your AddPhonenumberModule or some related feature module:

typescript

@NgModule({
    declarations: [AddPhonenumberComponent],
    imports: [
        CommonModule,
        MatDialogModule,
        FormsModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        MatSelectModule,
        MatButtonModule
    ]
})
export class AddPhonenumberModule {}

Ensure you remove the imports from the @Component decorator.

4. Ensure Proper Template Configuration: The error could also be related to your template configuration. Make sure that every form control name in your template matches with the controls defined in your FormGroup.

5. Check for CSS Issues: The screenshot indicates potential styling issues. Double-check if there are any global CSS or styles that might be affecting the Material components. Resetting styles or using a tool like Chrome's DevTools can help pinpoint CSS problems.

6. Upgrade Strategy: Sometimes, after major upgrades, there might be residues of older configurations or caches. Make sure to:

Delete node_modules folder Clear cache: npm cache clean --force Install dependencies again: npm install

7. Consider Creating a Minimal Reproduction: If the issue persists, try creating a new minimal Angular project with just the necessary code to reproduce the problem. This can help isolate the issue from other potential confounding factors in your main project.

Lastly, always keep an eye on Angular's official update guide, especially when jumping between major versions. There might be changes or steps that are easy to miss but are critical for the smooth functioning of your application.