Is there a way to access popup form values within an Angular Material component?

I created a datatable feature with options to 'ADD' and 'EDIT'. When the user clicks on the add-button, a popup will appear prompting for element name and symbol. After entering the details, the user can click the save button.

However, I am encountering an issue where I am unable to retrieve the form values in the component. Additionally, within the datatable, there is an edit option. If the user selects the edit button for a specific row, the element name and symbol should display in the same popup. Unfortunately, this functionality is currently not working. Can anyone assist me in troubleshooting this problem?

Below is the initial screen displaying the data table with the add and edit buttons:

https://i.sstatic.net/A1vWZ.png

When the user clicks the ADD button, a popup with two dropdowns should appear. However, I am encountering difficulties in retrieving the selected values when the Add button is clicked.

I have two expectations:

  1. Upon clicking ADD, I should be able to access the selected dropdown values in the component
  2. When the Edit button is clicked, the element name and symbol should be displayed in the same popup

View Demo

Visit Project

angulartypescriptmaterial-designangular-material

Answer №1

Your code has been updated with some modifications using the FormGroup.

 public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private formBuilder: FormBuilder) { 
     console.log(data);
     this.name = data.element.name;
     this.symbol = data.element.symbol;
     this.addTaskForm = this.formBuilder.group({
     name: this.name,
     symbol: this.symbol,
 });

CHECK OUT THE UPDATED DEMO HERE

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

Regular expression for textarea validation

I'm currently working on creating a regex for a textarea in my Angular 8 application. The goal is to allow all characters but not permit an empty character at the start. I've experimented with 3 different regex patterns, each presenting its own s ...

javascriptangularregex

Combine identical arrays of object keys into one unified array

https://i.sstatic.net/A2r5c.png I am striving for this particular output [ productId:106290, productserialno:[{ "12121", "212121" }] ] ...

javascriptangularangular6

Guide to creating a one-to-one object literal map with a different value type using a function return without explicitly defining the return type

At the moment, I have successfully managed to combine the keys and values of each object literal that is passed into a function. For example: interface StaticClass<T = any> { new (...args: any[]): T } type RecordOfStaticClasses = Record<string, ...

typescript

Executing multiple queries in a node.js transaction with Sequelize using an array

I am looking to include the updates on the clothingModel inside a transaction, with the condition that if it successfully commits, then update the reservationModel. This is the snippet of code I am attempting to refactor using sequelize.transaction tr ...

node.jstypescriptsequelize.js

The Java Spring and Angular 7 application is missing a necessary file request component

I am facing an issue with the POST method in Angular 6. I am trying to send an image to the server. When I test it using Postman, my Spring Boot application works perfectly and saves the image on the server. However, when I attempt to send the image from m ...

angularspring-boot

Cucumber Wrangler

I am completely new to using protractor/cucumber and restler in Typescript. The code below is what I have so far for hitting an endpoint URL and getting the response: Given('Hit the {string}', async (string) => { browser.quit() var data: ...

typescriptprotractorcucumberrestler

How can I assign a value from a child state parameter to a component property in UI-Router?

I have defined two routes for displaying a product list and product details: { name: "product", url: "/product", component: ProductListComponent, resolve: [ { token: "Products", deps: [ApiService], resolveFn: (api: ApiService ...

angularangular-ui-router

When `console.log(enum)` is executed in Typescript and AngularJS, the result will be `undefined`

Below is the code snippet for the file that contains the enum: module mops { export enum Status { OK = 0, ROC = (1 << 0), LLA = (1 << 1), LOA = (1 << 2), HIA = (1 &l ...

angularjstypescriptvisual-studio-2015

Modifying a property in a nested layout through a page in Next.js 13

Currently, I am facing a challenge in updating the page title within a nested layout structure. app/docs/layout.tsx: export const DocsLayout = ({children}:{children: React.ReactNode}) => { return ( <> <header> ...

reactjstypescriptnext.js

What steps are involved in constructing Jodit from scratch?

Seeking a non-minified, readable version of Jodit, I attempted to build it myself. However, my lack of experience with composer, node, npm, webpack, TypeScript, and other tools has left me struggling. Is there anyone who can guide me through the process s ...

node.jstypescriptnpmwebpackjodit

The animation in ThreeJs encounters context issues within Angular 2

I am trying to incorporate ThreeJs into my Angular 2 project. I have successfully rendered a scene with a simple cube, but I ran into an issue when using the animate() function. Here is the code snippet: import { OnInit, Component } from '@angular/co ...

javascriptangulartypescriptthree.js

How can I loop through a JSON object in Angular 8 using a function?

Within my component.ts file, I have developed a function: getData(id) { const idMod = id const idModN = document.getElementById("idMod").innerHTML = idMod console.log (idModN) } My goal is to click on a button and have the id of each ...

angulartypescriptangular8

Limit access to a menu following authentication

Within the sidebar section, there are 4 rubrics available (Administration, Marché, Portefeuille, Déconnexion). https://i.sstatic.net/O8zpH.png Upon user authentication, I want the Portefeuille rubric to remain hidden. To achieve this, I have implement ...

angular

Incorporating Sass into a TypeScript-enabled Create React App

Having recently transferred a create-react-app to typescript, I've encountered an issue where my scss files are not being recognized in the .tsx components. The way I'm importing them is as follows: import './styles/scss/style.scss'; ...

reactjstypescriptsasscreate-react-app

Convert to a TypeScript map

Here are the configurations I am working with: type Choice = { value: any, label: any } Additionally, there is a role interface: export interface UserRole { id: number name: string } I have a set of roles: const userRoles:UserRole[]:[ {id:1,name: ...

javascriptarraystypescriptdictionary

Retrieving the selected date value in Angular 7 using Kendo UI date picker

My App Component.html includes a simple navigation and a date picker. Here is the code snippet: <div class="container-fluid"> <div class="row"> <!-- Navigation Removed --> <div class="col-md-2 float-right"> ...

angularangular7angular-componentskendo-ui-angular2angular-component-life-cycle

Refreshing the browser does not load the Angular2 component and instead shows a 404 error

During my exploration of Angular 2, I developed a basic restaurant management application. Now, I am delving into more advanced techniques such as creating an app bundle, minification, and optimizing the application. The authentication component in my app ...

javascriptangularroutes

Finding and retrieving specific information from nested arrays within a JSON object can be done by implementing a method that filters the data

I have an array of objects where each object contains a list of users. I need to be able to search for specific users without altering the existing structure. Check out the code on StackBlitz I've tried implementing this functionality, but it's ...

javascriptangular

Transmitting images from ASP.NET Web API to Angular client

My latest update involves implementing a photo upload feature. I've successfully managed to save the images in a folder after uploading and store their paths in the database. Now, my challenge is figuring out how to display these photos in my Angular ...

asp.net.netangularasp.net-corewebapi

Is there a way to display the data from a URL as selectable options in a dropdown menu?

I have a URL containing an arrayList of data. My task is to fetch the data from this URL and display it as options in a dropdown menu, allowing users to select the desired option. I am aware that this can be achieved using the Get method, but I am facing d ...

angulargetdropdown