角材料中的md-select错误消息触发器

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 .

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

Answer 2

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>