md-select error message trigger in angular material

Question

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.

Rahul Singh · Accepted Answer · 2017-09-11 06:58:51Z

1

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;
}

answered Sep 11, 2017 at 6:58

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HBK Over a year ago

My priority is generating error angular material style in the UI

Rahul Singh Over a year ago

@HBK they you have to make use of forms this might help

user4676340 · Accepted Answer · 2017-09-11 07:02:47Z

0

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>

answered Sep 11, 2017 at 7:02

user4676340

Collectives™ on Stack Overflow

md-select error message trigger in angular material

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related