What could be causing my matDialog to display incorrectly in Angular version 15?

After I upgraded my project to version 15 of Angular, following the official Angular documentation, I encountered an issue with my MatDialog not opening correctly. The problem seemed to stem from removing the entryComponents and transforming all components to standalone. Everything functions correctly up to the Dialog components.

In the console, I kept getting the error message "Cannot read properties of undefined (reading 'errorState'). Even recreating the MatDialog component from scratch did not resolve this error. I am perplexed as to where this issue could be originating from. Can anyone provide insight on how to troubleshoot this?

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"
  },

Current look of the project:

angulartypescriptangular-materialangular15

Answer №1

Try replacing your current code with the method provided below:

    <div mat-dialog-content style="display:flex;flex-direction: column;">
        <mat-form-field>
            <mat-label>Phone Number</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>

In this solution, I have utilized the div tag along with attributes mat-dialog-content and mat-dialog-actions. This approach successfully resolved the issue in my scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in TypeScript detected for an undefined value that was previously verified

I have developed a function that can add an item to an array or update an item at a specific index if provided. Utilizing TypeScript, I have encountered a peculiar behavior that is puzzling me. Here is the Playground Link. This simple TypeScript functio ...

javascripttypescript

retrieving necessary components from sdk_aws

When I updated my project, I encountered the following error while trying to execute the ng serve command: ERROR in node_modules/aws-sdk/clients/s3.d.ts(12,24): error TS2307: Cannot find module 'stream'. node_modules/aws-sdk/clients/s3.d.ts(908,2 ...

node.jsangulartypescript

Steps for creating a TypeScript project with React Native

Hey there, I'm just starting out with react-native and I want to work on a project using VS Code. I'm familiar with initializing a project using the command "react-native init ProjectName", but it seems to generate files with a .js extension inst ...

typescriptreact-nativetsx

Encountering issues with loading Angular formControl

I've been going through an Angular tutorial on forms, which you can check out here. In my 'datasources.component.html' file, I have the following code: <form [formGroup]="queryForm"> <label>Query: <input type="text" formCont ...

javascriptangular

Preventing Memory Leaks in Single Page Applications (SPAs) Using Google DFP with Angular and Vue: A Guide to Properly Destroying Ads and Their References

I recently encountered an issue while trying to implement Google's DFP in both Vue.js and Angular single-page applications (SPAs) where it appears to be leading to a memory leak. For Angular: I have created a proof of concept which can be found here. ...

angularvue.jsvuejs2google-dfpgoogle-publisher-tag

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...

javascriptreactjstypescriptvalidationantd

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

cssangulartypescriptsanitize

Converting data received from the server into a typescript type within an Angular Service

Received an array of Event type from the server. public int Id { get; set; } public string Name { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } For Angular and TypeScript, I need to transform it into the following clas ...

c#angulartypescriptrxjs

What are the best scenarios for implementing abstraction in Angular?

Throughout my experience, I have encountered Java EE, .Net, and various other enterprise application architectures. In each case, there was always an abstract upper class - like AbstractService for generalizing the service layer. However, in Angular, I ha ...

angulartypescript

Tips for resolving: Dilemma - Angular configuration loaded in both synchronous and asynchronous manner

I recently updated my Angular 6 project to Angular 11. The project includes server-side rendering (SSR), and I am encountering an issue. After running ng run myapp:server, I am getting the following error: ✔ Server application bundle generation complete ...

angularserver-side-rendering

Error in Angular 8: Module loading from "url" has been intercepted due to an unsupported MIME type ("text/html") being blocked

I have developed an application using Angular 8 and Node 12. When I try to open a new tab or reload the page after building Angular 8, I encounter an issue for which I have extensively searched online but found no solution. In the Firefox console, the er ...

node.jsangularangular-cliangular7angular8

Troubleshooting Typescript app compilation problem in a Docker environment

I am encountering a challenge while trying to build my typescript Express app using Docker. Surprisingly, the build works perfectly fine outside of Docker! Below is the content of my Dockerfile: FROM node:14-slim WORKDIR /app COPY package.json ./ COPY yarn ...

javascriptnode.jstypescriptdockerexpress

Tips for adding a new property to an array object in TypeScript using a condition

Here is an array object that I have: arr = [ { Name: "ABC", Age: 20}, { Name: "XXX", Age: 15} ]; In Typescript, I am looking to dynamically add a new property called "Flag" with a value of 1 only if the Age is greater than 15. Can someone suggest ...

javascripttypescriptobjectarrayobject

What is the reason behind useEffect giving warnings for unnecessary fields that are not included in the dependencies array?

After reviewing the documentation for useEffect, I am puzzled by the warnings I receive for every variable and function used within useEffect, despite not having a dependency on them. Take a look at my useEffect below: const [updatedComm, setUpdatedComm] ...

reactjstypescriptreact-hooks

Angular 2: Retrieve current currency rates based on your location

When I apply the {{listing.sellPrice | currency : undefined : 0}} code, it only displays the symbol $. However, I would like for the currency to change based on the user's location. For instance, if someone is in Europe, their currency would be shown ...

angularcurrencyangular-pipe

Attempting to verify if a function is being invoked within a subscription, but finding that it never gets activated

I have a method that needs to be tested when called in an ngOnInit. Specifically, I want to ensure that when the ngOnInit is triggered, this.anotherService.methodToCall() is executed and verify what parameters it is called with. However, despite my effort ...

angulartestingjasmine

Is there a way to make PrismaClient return DateTime fields as Unix timestamps rather than JavaScript date objects?

When utilizing the PrismaClient for database interaction, DateTime fields are returned as JavaScript Date objects instead of Unix timestamp numbers. Despite being stored as Unix timestamp numbers in the database itself, I require the dates to be retrieved ...

typescriptdatetimetypesprisma

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table

Retrieve the specific object's methods based on a specified return type criteria

Initially, I have a class containing attributes and methods. My goal is to filter and retrieve only the keys of the methods. I created a utility type for this purpose and it worked smoothly: type FunctionPropertyNames<T> = { [K in keyof T]: T[K] e ...

typescript

Adding a fresh element to an array in Angular 4 using an observable

I am currently working on a page that showcases a list of locations, with the ability to click on each location and display the corresponding assets. Here is how I have structured the template: <li *ngFor="let location of locations" (click)="se ...

javascriptarraysangulartypescriptobservable