Skip to main content
adicionou 262 caracteres ao conteúdo
Fonte Link

Form group:

this.ContatosForm = this.formBuilder.group({
    ddd: ['047', [Validators.required, Validators.maxLength(3)]],
    numero: ['', [Validators.required, Validators.maxLength(9)]],
    tipoContato: ['Telefone', Validators.required]
});

Form group:

this.ContatosForm = this.formBuilder.group({
    ddd: ['047', [Validators.required, Validators.maxLength(3)]],
    numero: ['', [Validators.required, Validators.maxLength(9)]],
    tipoContato: ['Telefone', Validators.required]
});
adicionou 964 caracteres ao conteúdo
Fonte Link

Edit:

HTML formulario:

<form [formGroup]="ContatosForm" style="display: flex; flex-flow: row nowrap; width: 100%;" (ngSubmit)="cadastrarContato()">
    <label class="label-contatos">
        * DDD:
        <input class="input-contatos label-ddd" formControlName="ddd" [maxlength]="3">
    </label>
    <label class="label-contatos">
        * Número:
        <input class="input-contatos" formControlName="numero" [maxlength]="9">
    </label>
    <label class="label-contatos">
        * Tipo de contato:
        <select class="input-contatos" formControlName="tipoContato">
            <option *ngFor="let tipoContato of TipoContatos" [value]="tipoContato">{{tipoContato}}</option>
        </select>
    </label>
                    
    <label class="label-contatos input-submit-contato">
        <mat-icon class="icon-submit-contato">add</mat-icon>
        <input type="submit" style="display: none;">
    </label>
</form>

Edit:

HTML formulario:

<form [formGroup]="ContatosForm" style="display: flex; flex-flow: row nowrap; width: 100%;" (ngSubmit)="cadastrarContato()">
    <label class="label-contatos">
        * DDD:
        <input class="input-contatos label-ddd" formControlName="ddd" [maxlength]="3">
    </label>
    <label class="label-contatos">
        * Número:
        <input class="input-contatos" formControlName="numero" [maxlength]="9">
    </label>
    <label class="label-contatos">
        * Tipo de contato:
        <select class="input-contatos" formControlName="tipoContato">
            <option *ngFor="let tipoContato of TipoContatos" [value]="tipoContato">{{tipoContato}}</option>
        </select>
    </label>
                    
    <label class="label-contatos input-submit-contato">
        <mat-icon class="icon-submit-contato">add</mat-icon>
        <input type="submit" style="display: none;">
    </label>
</form>
Fonte Link

Problema ao exibir informações em uma tabela com Angular

Estou criando uma tabela com mat-table do angular, mais ao exibir as linhas nenhuma informação aparece.

HTML:

<div>
     <mat-table [dataSource]="Contatos">
         <ng-container matColumnDef="ddd">
             <th mat-header-cell *matHeaderCellDef> DDD </th>
             <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Ddd}} </td>
         </ng-container>
         <ng-container matColumnDef="numero">
             <th mat-header-cell *matHeaderCellDef> Número </th>
             <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Numero}} </td>
         </ng-container>
         <ng-container matColumnDef="tipo">
              <th mat-header-cell *matHeaderCellDef> Tipo Contato </th>
              <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Tipo}} </td>
         </ng-container>
                        
         <tr mat-header-row *matHeaderRowDef="['ddd', 'numero', 'tipo']"></tr>
         <tr mat-row *matRowDef="let contatoCliente; columns: ['ddd', 'numero', 'tipo']"></tr>
    </mat-table>
</div>

Modulo:

public cadastrarContato(): void {
    if(!this.ContatosForm.valid)
      return;
    
    let contato: Contato = new Contato();
    Object.assign(contato, this.ContatosForm.value);

    this.Cliente.Contatos.push(contato);

    this.Contatos = new MatTableDataSource(this.Cliente.Contatos);
  }

Quando os dados são adicionados na tela as linhas são criada porem nada é exibido

Minha classe Contato possui os seguintes campos:

export class Contato {
    public Ddd: string;
    public Numero: string;
    public Tipo: TipoContato;
}