Formulario.ts
import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { MatTableDataSource } from '@angular/material/table'; import { ActivatedRoute, Router } from '@angular/router'; import { ComumComponente } from 'app/core/comum/comum.component'; import { MensagemModel } from 'app/core/model/error.model'; import { EmpresaMarketPlacesGradeModel, IEmpresaMarketPlacesGradeModel } from 'app/entities/enidades/empresa.market.places-grade.model'; import { IEmpresaMarketPlacesIncluirModel } from 'app/entities/entidades/empresa.market.places-incluir.model'; import { IMarketPlacesModel } from 'app/entities/marketplaces/model/marketplaces.model'; import { MarketplacesService } from 'app/entities/marketplaces/service/marketplaces.service'; import { SnackBarComponent } from 'app/shared/snack-bar/snack-bar.component'; import { Validacoes } from 'app/shared/util/validator'; import { IEmpresaModel } from '../model/empresa.model'; import { EmpresaService } from '../service/empresa.service'; @Component({ selector: 'jhi-empresa-form', templateUrl: './empresa-form.component.html' }) export class EmpresaFormComponent extends ComumComponente implements OnInit { id: string; excluido: boolean; incluir: boolean; marketPlaces: IMarketPlacesModel[]; marketPlacesGrade: IEmpresaMarketPlacesGradeModel[]; dataSource: MatTableDataSource<IEmpresaMarketPlacesGradeModel> = new MatTableDataSource(); displayedColumns: string[] = ['marketPlaces', 'porcentagem', 'alterar', 'excluir']; // empresaMarketPlacesForm empresaMarketPlacesForm = this.fb.group({ percentual: ['', [ Validators.required, ]], marketplaces: ['', [ Validators.required, ]], }); // Formulario principal empresaForm = this.fb.group({ id: [''], // Empresa nome: ['', [ Validators.required, Validators.maxLength(255), ]], cnpj: ['', [ Validators.required, Validators.minLength(18), Validators.maxLength(18), Validacoes.isValidCnpj, ]], telefoneEmpresa: ['', [ Validators.maxLength(14), ]], emailEmpresa: ['', [ Validators.required, Validators.email, Validators.maxLength(255), ]], // Responsavel nomeResponsavel: ['', [ Validators.required, Validators.maxLength(255), ]], telefoneResponsavel: ['', [ Validators.maxLength(14), ]], celularResponsavel: ['', [ Validators.maxLength(15), ]], emailResponsavel: ['', [ Validators.required, Validators.email, Validators.maxLength(255), ]], }); constructor( public snackBar: SnackBarComponent, private fb: FormBuilder, private router: Router, private empresaService: EmpresaService, private marketplacesService: MarketplacesService, private routaAtual: ActivatedRoute, ) { super(snackBar); this.marketPlaces = []; this.id = ''; this.excluido = false; this.incluir = true; this.marketPlacesGrade = []; this.dataSource = new MatTableDataSource(this.marketPlacesGrade); } ngOnInit(): void { this.preencherMarketsPlaces(); this.buscarPorId(); } limpar(): void { this.limparEmpresaMarketPlacesForm(); if(this.id === '' || this.id === null || this.id === undefined) { this.empresaForm.reset(); } else { this.buscarPorId(); } } voltar(): void { this.router.navigate(['/empresa']); } salvar(): void { } adicionarMarketPlaces(): void { const errorMessage = new MensagemModel(); const errorMessages: Array<MensagemModel> = []; if (this.empresaMarketPlacesForm.invalid) { if (!this.empresaMarketPlacesForm.controls.percentual?.valid) { errorMessage.texto = 'Percentual é obrigatório. Só aceita número, uma virgula e até 2 casas decimais !'; errorMessages.push(errorMessage); super.mensagemTela('ERROR', errorMessages); return; } if (!this.empresaMarketPlacesForm.controls.marketplaces?.valid) { errorMessage.texto = 'Marketplace é obrigatório !'; errorMessages.push(errorMessage); super.mensagemTela('ERROR', errorMessages); return; } } const emmkpg = new EmpresaMarketPlacesGradeModel(); const marketplaces = this.empresaMarketPlacesForm.controls.marketplaces.value; emmkpg.idMarketPlaces = marketplaces.id; emmkpg.marketPlacesNome = marketplaces.nome; emmkpg.porcentagem = this.empresaMarketPlacesForm.controls.percentual.value; this.marketPlacesGrade.push(emmkpg); this.dataSource.data.push(emmkpg); this.limparEmpresaMarketPlacesForm(); } private buscarPorId(): void { const rotaAtalMomento = String(this.routaAtual.snapshot.url[0].path); this.incluir = true; if(rotaAtalMomento !== 'incluir') { this.incluir = false; this.id = rotaAtalMomento; this.excluido = false; this.empresaService.buscarPorId(rotaAtalMomento).subscribe( entidade => { if(entidade?.body !== null) { this.updateForm(entidade?.body); if(entidade.body.statusDoRegistro?.key === 'EXCLUIDO') { this.excluido = true; } } }, (error: any) => { super.mostrarError(error); } ); } } private preencherMarketsPlaces(): void { this.marketPlaces = []; this.marketplacesService.buscarTodos().subscribe( marketPlaces => { this.marketPlaces = marketPlaces; }, (error: any) => { super.mensagemTela('ERROR', error); } ); } private updateForm(empresa: IEmpresaModel): void { this.empresaForm.patchValue({ id: empresa.id, nome: empresa.nome, cnpj: empresa.cnpj, telefoneEmpresa: empresa.telefoneEmpresa, emailEmpresa: empresa.emailEmpresa, nomeResponsavel: empresa.nomeResponsavel, telefoneResponsavel: empresa.telefoneResponsavel, celularResponsavel: empresa.celularResponsavel, emailResponsavel: empresa.emailResponsavel, }); } private limparEmpresaMarketPlacesForm(): void { this.empresaMarketPlacesForm.reset(); } }
formulario.html
<div fxLayout="row" fxLayoutWrap="wrap"> <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100"> <mat-card> <mat-card-header> <mat-card-title *ngIf="incluir" jhiTranslate="empresa.titulo.incluir"></mat-card-title> <mat-card-title *ngIf="!incluir" jhiTranslate="empresa.titulo.alterar"></mat-card-title> </mat-card-header> <mat-card-content> <mat-tab-group> <form [formGroup]="empresaForm"> <input formControlName="id" name="id" formControlName="id" type="hidden" /> <mat-tab label="{{ 'empresa.abas.um' | translate }}"> <br/> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.nome' | translate }}" id="nome" formControlName="nome" name="nome" maxlength="255" required /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.cnpj' | translate }}" id="cnpj" formControlName="cnpj" name="cnpj" [textMask]="{mask: cnpj}" required /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.telefone.empresa' | translate }}" id="telefoneEmpresa" formControlName="telefoneEmpresa" name="telefoneEmpresa" [textMask]="{mask: telefone}" /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.email.empresa' | translate }}" id="emailEmpresa" formControlName="emailEmpresa" name="emailEmpresa" maxlength="255" required /> </mat-form-field> </div> </div> </mat-tab> <mat-tab label="{{ 'empresa.abas.dois' | translate }}"> <br/> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.nome.responsavel' | translate }}" id="nomeResponsavel" formControlName="nomeResponsavel" name="nomeResponsavel" maxlength="255" required /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.telefone.responsavel' | translate }}" id="telefoneResponsavel" formControlName="telefoneResponsavel" name="telefoneResponsavel" [textMask]="{mask: telefone}" /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.telefone.celular' | translate }}" id="celularResponsavel" formControlName="celularResponsavel" name="celularResponsavel" [textMask]="{mask: celular}" /> </mat-form-field> </div> </div> <div> <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.email.responsavel' | translate }}" id="emailResponsavel" formControlName="emailResponsavel" name="emailResponsavel" maxlength="255" required /> </mat-form-field> </div> </div> </mat-tab> </form> <form [formGroup]="empresaMarketPlacesForm"> <mat-tab label="{{ 'empresa.abas.tres' | translate }}"> <br/> <div> <div fxLayout="row" fxFlex="20" fxLayoutAlign="start start"> <mat-form-field> <input matInput placeholder="{{ 'empresa.percentual' | translate }}" id="percentual" formControlName="percentual" name="percentual" pattern="^\d+(,\d{1,2})?$" > </mat-form-field> </div> <div fxLayout="row" fxFlex="20" fxFlexOffset="1" fxLayoutAlign="start start"> <mat-form-field> <mat-label jhiTranslate="empresa.marketplaces.nome"></mat-label> <mat-select id="marketplaces" formControlName="marketplaces" name="marketplaces" > <mat-option></mat-option> <mat-option *ngFor="let marketPlace of marketPlaces" [value]="marketPlace"> {{marketPlace.nome}} </mat-option> </mat-select> </mat-form-field> </div> <div fxLayout="row" fxFlex="20" fxFlexOffset="1" fxLayoutAlign="start start"> <button *ngIf="!excluido" mat-mini-fab type="button" matTooltip="{{ 'empresa.marketplaces.adicionar' | translate }}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="adicionarMarketPlaces()"> <mat-icon>add</mat-icon> </button> </div> </div> <div> <div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="marketPlaces"> <mat-header-cell *matHeaderCellDef> {{ 'empresa.marketplaces.nome' | translate }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell> </ng-container> <ng-container matColumnDef="porcentagem"> <mat-header-cell *matHeaderCellDef> {{ 'empresa.percentual' | translate }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell> </ng-container> <ng-container matColumnDef="alterar"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell> </ng-container> <ng-container matColumnDef="excluir"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div> </div> <br> </mat-tab> </form> </mat-tab-group> <h6 class="text-danger m-t-0 m-b-10" jhiTranslate="geral.campos.obrigatorios"></h6> <button *ngIf="!excluido" mat-mini-fab type="button" matTooltip="{{ 'geral.salvar' | translate }}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="salvar()"> <mat-icon>save</mat-icon> </button> <button *ngIf="!excluido" mat-mini-fab type="button" matTooltip="{{ 'geral.limpar' | translate }}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="limpar()"> <mat-icon>clear_all</mat-icon> </button> <button mat-mini-fab type="button" matTooltip="{{ 'geral.voltar' | translate }}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="voltar()"> <mat-icon>backspace</mat-icon> </button> </mat-card-content> </mat-card> </div> </div>
No método adicionarMarketPlaces(), ele adiciona corretamente tanto no array this.marketPlacesGrade.push(emmkpg); e this.dataSource.data.push(emmkpg);.
Mas não atualiza a tabela no html.
Tentei assim: <mat-table [dataSource]="dataSource"> e <mat-table [dataSource]="marketPlacesGrade">.
O que pode ser ?