ngModel validation does not work in select field

Asked

Viewed 226 times

2

I am trying to put a required validation in select and then show if the user fails to fill in.

I tried something like:

 <select required #selecttipoproduto="ngModel" (change)="setTipoProduto(tipoDoProduto)" [(ngModel)]="tipoDoProduto" name="selecttipoproduto" id="selecttipoproduto" class="browser-default custom-select">
    <option class="dropdown-item" disabled>{{tipoDoProduto || 'Tipo do Produto'}}</option>
    <option [hidden]="tipoprodutos[k].tipo == tipoDoProduto" *ngFor="let tipoProduto of tipoprodutos; let k = index">{{tipoProduto.tipo}}</option>
 </select>

<div class="input-invalido animated shake" *ngIf="submited && selecttipoproduto.errors">
  Tipo do produto é obrigatório
</div>

I’m using this same form in an input field, but it shows the message. Example:

<input #nome="ngModel" [(ngModel)]="produto.nome" maxlength="60" name="nome" id="nome" required
                    type="text" class="form-control">

<div class="input-invalido animated shake" *ngIf="submited && nome.errors">
   Nome do produto é obrigatório
</div>
angular typescript

1 answer

1


required only works in select if the value of the first option is ""

<select required #selecttipoproduto="ngModel" (change)="setTipoProduto(tipoDoProduto)" [(ngModel)]="tipoDoProduto" name="selecttipoproduto" id="selecttipoproduto" class="browser-default custom-select">
        <option class="dropdown-item" value="" disabled>{{tipoDoProduto || 'Tipo do Produto'}}</option>
        <option [hidden]="tipoprodutos[k].tipo == tipoDoProduto" *ngFor="let tipoProduto of tipoprodutos; let k = index">{{tipoProduto.tipo}}</option>
 </select>

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.