CODEWITHSUNDEEP
angularselectangular-material
Paul Cheriyan
Paul Cheriyan

Reputation: 658

html validation in mat-select required is not working

I need to required set mat-select in my project but the validation is not triggering

I have tried HTML validation using #countryId="ngModel" and requred= true 

<form #f="ngForm" (submit)="f.valid && updateData() ">
 <mat-form-field>
  <mat-select placeholder="Select Country" [(ngModel)]="userDetails.countryId" name="dddd" #select="ngModel"
    (change)="onCountryChange()" required>
    <mat-option *ngFor="let country of countryList" [value]="country.id"> {{country.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="f.submitted && select.invalid">
    <mat-error *ngIf="select.errors.required">Country is required</mat-error>
  </mat-error>
 </mat-form-field>
 <button mat-button type="submit">Submit</button>
</form>

I didn't find any error message or the validation from this code

output of {{f | json}}

{ "submitted": false, "_directives": [], "ngSubmit": { "_isScalar": false, "observers": [], "closed": false, "isStopped": false, "hasError": false, "thrownError": null, "__isAsync": false }, "form": { "validator": null, "asyncValidator": null, "pristine": true, "touched": false, "_onDisabledChange": [], "controls": {}, "valueChanges": { "_isScalar": false, "observers": [], "closed": false, "isStopped": false, "hasError": false, "thrownError": null, "__isAsync": false }, "statusChanges": { "_isScalar": false, "observers": [], "closed": false, "isStopped": false, "hasError": false, "thrownError": null, "__isAsync": false }, "status": "VALID", "value": {}, "errors": null } }

stackblitz demo

Upvotes: 0

Views: 9343

Answers (3)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

try this way 

  <mat-error *ngIf="select.errors?.required">
    Country is required
  </mat-error>

or 

  <mat-error *ngIf="select.hasError('required')">
    Country is required
  </mat-error>

Updated 🚀🚀 

  <mat-error *ngIf="select.hasError('required') || (f.submitted && select.invalid)">
      Please choose an animal
  </mat-error>

demo 🔥🔥

Upvotes: 2

Maharoz Alam Mugdho
Maharoz Alam Mugdho

Reputation: 466

have a look here StackBlitz

.html

  <form #countryForm="ngForm">
    <br>
      <mat-form-field>
      <mat-select placeholder="Select Country" name="select" [(ngModel)]="select" required>
        <mat-option *ngFor="let coutry of Countries" [value]="coutry.viewValue" >
          {{ coutry.viewValue }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="countryForm.invalid">Country is required</mat-error>
    </mat-form-field>

    <div>
        <button mat-raised-button color="primary" type="submit">Submit</button>
      </div>

    </form>

.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  select;
  Countries = [
    { viewValue: 'USA'},
    { viewValue: 'UK'},
    { viewValue: 'UAE'}
  ];

}

Upvotes: 0

Alexandr Mihalciuc
Alexandr Mihalciuc

Reputation: 2577

I think the problem is in the filter when you display the error: 

*ngIf="f.submitted && select.invalid"

Remove the f.submitted from the ngIf.

Tip: to see the state of your form to debug issues emmit it using {{f | json}}. That will display all the state on the form.

Upvotes: 1

Related Questions