Select using Enum

Question

Select using Enum

Navigation

#1 by (1 votes)

0

I have a form where one of the fields is a select, and this select is an enum, I get it popular but I can not send the value, it always goes 0 when I do the post. I wanted a select with two options

HTML:

<form class="mat-dialog-content" (ngSubmit)="(submit)" #formControl="ngForm">

  <div class="form">
    <mat-form-field color="accent">
      <textarea matInput #input class="form-control" placeholder="Nome" [(ngModel)]="data.name" name="name" required></textarea>
      <mat-error *ngIf="formControl.invalid">{{ getErrorMessage() }}
      </mat-error>
    </mat-form-field>
  </div>
  <div class="form">
    <mat-form-field>
      <mat-select matNativeControl required>
        <mat-option *ngFor="let item of (editoriaTipo | keys)" [value]="item.key" [(ngModel)]="data.type">{{ item.value }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div mat-dialog-actions>
    <button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="confirmAdd()">
        Savar
      </button>
    <button mat-button (click)="onNoClick()" tabindex="-1">Cancelar</button>
  </div>
</form>

Service:

  addEditorias(editorias: Editorias): void {
    this.httpClient.post(this.API_URL_Ed, editorias).subscribe(
      data => {
        this.dialogData = editorias;
        // this.editoriaService.showToaster("Successfully added", 3000);
      },
      (err: HttpErrorResponse) => {
        // this.editoriaService.showToaster(
        //   "Error occurred. Details: " + err.name + " " + err.message,
        //   8000
        // );
      }
    );
  }

Enum:

export enum EditoriaType {
  programa = 1,
  editoria = 2,
}

Object:

import { EditoriaType } from "../enum/editoria-type";

export interface Editorias {
  id: number;
  name: string;
  type: EditoriaType;
  dataDeCriacao: Date;
  dataDeAtualizacao: Date;
  deletado: boolean;
}

It also gives the error: EditorCriarComponent.html: 68 ERROR Error: If ngModel is used within a form tag, either the attribute name must be set or the form control must be defined as 'standalone' in ngModelOptions.

Always register with type 0, even if I choose:

{
name: "1",
type: 0,
id: "950a1854-a66d-43cd-0bef-08d671c5dec9",
}

javascript angular material

asked by anonymous 03.01.2019 / 23:06

1 answer

Trigger Mysql from one base to another I want to get the result of a Select to use in JavaScript

score 1 · Accepted Answer

Hello,

You can try to use it this way:

  ...

  listaEditoria = EditoriaType;
  keys:any;

  constructor(){
    this.keys = Object.keys( this.listaEditoria ).filter(Number)
    console.log( 'KEys', this.keys )
  }

and no select:

<mat-option *ngFor="let key of keys" [value]="key" >
   {{listaEditoria[ key ]}}
</mat-option>

I hope this helps ...