CODEWITHSUNDEEP
javascriptangularangular-material
HBK
HBK

Reputation: 735

md-select error message trigger in angular material

I have a md-select and a corresponding submit button that I use to call a web-service and pass data from md-select (I am not using any forms here):

<div class="col-8">
    <md-select placeholder="Select User" class="custom-select" id="user" name="user" [(ngModel)]="user" floatPlaceholder="never">
        <md-option *ngFor="let user of users| keys" [value]="user.key">{{user.value}}</md-option>
    </md-select>
</div>
<div class="col-2 mb-3">
    <button type="button" class="btn blue-btn" (click)="ws(user)">View Details</button>
</div>

Upon submit and before calling web-service, I want to check whether any option has been selected and display an error message (angular material style) in case none is. The Angular documentation mentions an errorStateMatcher for mdInput but none for md-select.

Upvotes: 0

Views: 248

Answers (2)

user4676340
user4676340

Reputation:

The best way, IMO, is to use reactive forms : 

myForm: FormGroup;
constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
        user: ['', Validators.required]
    });
}

submitMethod() {
    if (this.myForm.valid) {/* ... */}
}

// HTML
<form novalidate (ngSubmit)="submitMethod" [formGroup]="myForm">
    <select formControlName="user" ...>
</form>

Upvotes: 0

Rahul Singh
Rahul Singh

Reputation: 19622

make use of ngModelChange

<md-select placeholder="Select User" class="custom-select" id="user" name="user" [(ngModel)]="user" floatPlaceholder="never" (ngModelChange)="changeSelected($event)">
        <md-option *ngFor="let user of users| keys" [value]="user.key">{{user.value}}</md-option>
    </md-select>

Component

changeSelected(event) {
  this.user = event.user;
}

Upvotes: 1

Related Questions