-2

Tengo el siguiente formulario, al hacer click en el botón agregar, se despliega un mat-dialog donde se puede agregar una nueva descripción para después ser mostrada en la tabla, hace bien la operación y manda un mensaje de éxito, pero al cerrar ese mensaje de éxito se queda la ventana del mat-dialog y quiero que en automático se cierre cuando sale la ventana de exito.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

En el Component.ts mando a llamar al metodo openDialog para que abra la ventana de agregar una nueva descripción que esta en el componente AgregarNuevo

import { Component, ViewChild } from '@angular/core';
import { CatalogosServiceService } from './catalogos-service.service';
import { CatalogoProducto } from './CatalogoProducto';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { CatalogoSubProducto } from './CatalogoSubProducto';
import { FormGroup } from '@angular/forms';
import Swal from 'sweetalert2';
import { AgregarNuevoComponent } from './agregar-nuevo/agregar-nuevo.component';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'pruebaforms';
  panelOpenState = false;
  displayedColumns: string[] = ['idProducto', 'descripcionProducto','botonTipoActions'];
  displayedColumnsSubProd: string[] = ['idSubProducto', 'descripcionSubProducto'];
  catProducto: CatalogoProducto[] = [];
  catSubProducto: CatalogoSubProducto[] = [];
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  producto: CatalogoProducto = new CatalogoProducto();

  
  constructor(private catService: CatalogosServiceService, public dialog: MatDialog) {}

  ngOnInit(): void {
    this.obtenerCatalogoProducto();
    this.obtenerCatalogoSubProducto();
  }

  //obtiene la lista del cat producto
  dataSource: any;
   obtenerCatalogoProducto() {
    this.catService.obtenerCatProd().subscribe((response) => {
      this.catProducto = response.data;
      console.log('PRUEBA  CAT PROD  ', response.data);
      this.dataSource = new MatTableDataSource(this.catProducto);
      this.dataSource.paginator = this.paginator;
    });
  }

  //obtiene la lista del cat subproducto
  dataSourceSubProducto: any;
  private obtenerCatalogoSubProducto() {
    this.catService.obtenerCatSubProd().subscribe((response) => {
      this.catSubProducto = response.data;
      console.log('PRUEBA CAT SUBPROD  ', response.data);
      this.dataSourceSubProducto = new MatTableDataSource(this.catSubProducto);
      this.dataSourceSubProducto.paginator = this.paginator;
    });
  }


  openDialog():void{
    this.dialog.open(AgregarNuevoComponent,{
        width: '500px',
        height: '240px'
    });
  }

  async eliminar(element: any, row:any){
    console.log("ID    ", row.idProducto);
    const deleteAlert = Swal.fire({
      title: '¿Está seguro de eliminar los valores?',
      showDenyButton: true,
      confirmButtonText: 'Si',
    });
    if((await deleteAlert).isConfirmed){

         const index = this.dataSource.data.indexOf(element);
          this.dataSource.data.splice(index);
          this.dataSource = new MatTableDataSource(this.dataSource.data);
         

      this.producto.idProducto = row.idProducto;
      console.log("IDDD  ", this.producto.idProducto);
      this.catService.eliminarProductos(this.producto).subscribe(data => {
        Swal.fire({
          icon: 'success',
          title: 'Éxito',
          text: 'Registro borrado correctamente'
        });
      })
    }
  }
}

html

<div class="container">
  <mat-accordion>
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>
          PRODUCTO
        </mat-panel-title>
      </mat-expansion-panel-header>
      <form>
        <br>
        
        <button mat-raised-button color="primary" (click)="openDialog()"> Agregar
          <mat-icon>add</mat-icon>
        </button>
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
          <ng-container matColumnDef="idProducto">
            <th mat-header-cell *matHeaderCellDef>ID.</th>
            <td mat-cell *matCellDef="let element">{{ element.idProducto }}</td>
          </ng-container>

          <ng-container matColumnDef="descripcionProducto">
            <th mat-header-cell *matHeaderCellDef>PRODUCTO</th>
            <td mat-cell *matCellDef="let element">
              <mat-form-field>
                <input matInput [value]="element.descripcionProducto" />
              </mat-form-field>
            </td>
          </ng-container>
          <ng-container matColumnDef="botonTipoActions">
            <th mat-header-cell *matHeaderCellDef> ACCIONES </th>
            <td mat-cell *matCellDef="let element">
              <button mat-icon-button color="primary">
                <mat-icon>edit</mat-icon>
              </button>
             
              <button mat-icon-button color="warn" (click)="eliminar($event.target,element)">
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </form>
      <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
      </mat-paginator>
    </mat-expansion-panel>

    <!----------   TABLA SUBPRODUCTO   -->
    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          SUB PROD
        </mat-panel-title>
      </mat-expansion-panel-header>

      <table mat-table [dataSource]="dataSourceSubProducto" class="mat-elevation-z8">
        <ng-container matColumnDef="idSubProducto">
          <th mat-header-cell *matHeaderCellDef>ID.</th>
          <td mat-cell *matCellDef="let element">{{ element.idSubProducto }}</td>
        </ng-container>

        <ng-container matColumnDef="descripcionSubProducto">
          <th mat-header-cell *matHeaderCellDef>SUBPRODUCTO</th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field>
              <input matInput [value]="element.descripcionSubProducto" />
            </mat-form-field>
          </td>
        </ng-container>


        <tr mat-header-row *matHeaderRowDef="displayedColumnsSubProd"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsSubProd"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
      </mat-paginator>
    </mat-expansion-panel>
  </mat-accordion>
</div>

AgregarNuevoCompoennt.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { CatalogoProducto } from '../CatalogoProducto';
import { CatalogosServiceService } from '../catalogos-service.service';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-agregar-nuevo',
  templateUrl: './agregar-nuevo.component.html',
  styleUrls: ['./agregar-nuevo.component.css']
})
export class AgregarNuevoComponent implements OnInit {
catalogoProductoModel: CatalogoProducto = new CatalogoProducto();
nuevoForm!: FormGroup;
descripcion = new FormControl('',[Validators.required, Validators.maxLength(15)]);

  constructor(public dialogRef: MatDialogRef<AgregarNuevoComponent>, private catService: CatalogosServiceService) { }

  ngOnInit(): void {
    this.nuevoForm = new FormGroup({
      descripcion: new FormControl('',[Validators.required, Validators.maxLength(15)])
    })
  }

  agregar(){
    if(this.nuevoForm.valid){
      console.log("es valido")
      console.log("DESCRIPCION    ", this.nuevoForm.get('descripcion')?.value);
      this.catalogoProductoModel.descripcionProducto = this.nuevoForm.get('descripcion')?.value;
      this.catService.agregarNuevoProducto(this.catalogoProductoModel).subscribe(response => {
        Swal.fire({
          icon: 'success',
          title: 'Éxito',
          text: 'Agregado correctamente'
        });
      })
    }
  }


 restablecer(){
  this.nuevoForm.get('descripcion')?.reset();
 }


}

AgregarNuevo html

<form [formGroup]="nuevoForm">
    <table class="example-full-width" cellspacing="0">
        <tr>
            <td>
                <mat-form-field class="example-full-width">
                    <mat-label>Descripcion:</mat-label>
                    <input matInput formControlName="descripcion">
                </mat-form-field>
            </td>
        </tr>
    </table>
    <div>
        <button mat-button (click)="agregar()">Agregar</button>
        <button mat-button (click)="restablecer()">Restablecer</button>
    </div>
</form>

¿Cómo puedo hacer para que al cerrar la ventana de exito, desaparezca la ventana del mat-dialog? que necesito agregar?

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.