¿Cómo se pueden obtener valores de forma emergente en componente en Angular, material? - angular, mecanografiado, material-diseño, angular-material

Hice una tabla de datos con las opciones "AGREGAR" y "EDITAR". Si el usuario hace clic en el botón Agregar, aparecerá una ventana emergente. Solicitará el nombre y el símbolo del elemento. El usuario hace clic en un botón de guardar. No obtengo el valor del formulario en el componente y en la tabla de datos tenemos una opción de edición. Si el usuario hace clic en el botón de edición de una fila en particular, el nombre del elemento y el símbolo deberían aparecer en la misma ventana emergente. A partir de ahora, esto no funciona alguien me ayuda a seguir adelante.

A continuación se muestra mi primera pantalla, puede ver la tabla de datos con el botón Agregar y editar

si el usuario presiona el botón AGREGAR, esta ventana emergente aparecerá con dos menús desplegables aquí cuando el usuario haga clic en el botón Agregar No obtengo el valor seleccionado

Esperando dos cosas

1. Cuando el usuario hace clic en AGREGAR, debería obtener los valores desplegables seleccionados en el componente
2. Cuando el usuario hace clic en el botón Editar, debería obtener el nombre del elemento y el símbolo del elemento en la misma ventana emergente

Manifestación

proyecto

Respuestas

He hecho algunos cambios usando FormGroup en tu código

 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,
});

HERE IS THE WORKING DEMO