Question

我有一个md-select和一个相应的提交按钮，用于调用网络服务并从md-select传递数据（我这里没有使用任何表单）：

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

提交后，在调用Web服务之前，我想检查是否已选择任何选项并显示错误消息（角度材质样式）以防万一。 Angular文档提到了errorStateMatcher mdInput但md-select没有。

Answer 1

使用 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>

<强>组件

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

Answer 2

最好的方式，IMO，是使用反应形式：

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>

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

2 个答案: