Angular Material 2 选择错误未显示在控件下方

Question

Angular 4.4.4

Angular 材质 2.0.0-beta.12

我创建了一个带有以下mat-select 元素的模板驱动表单：

<mat-form-field class="add-task-full-width">
    <mat-select matInput
                [(ngModel)]="taskForCreation.areaId"
                id="areaControl"
                #areaControl="ngModel"
                name="areaControl"
                required
                (ngModelChange)="onAreaChanged($event)"
                placeholder="Area">
        <mat-option *ngFor="let area of areas" [value]="area.id">
            {{ area.description }}
        </mat-option>
        <mat-error *ngIf="areaControl.hasError('required')">
            Area is <strong>required</strong>
        </mat-error>
    </mat-select>
</mat-form-field>

如果我在未从列表中选择项目的情况下跳出字段，控件会变为红色并变为无效，但错误消息会显示在列表底部，而不是控件下方。无论我尝试什么，我都无法改变这一点。

谁能看看我哪里出错了？

Answer 1

mat-error 元素应放在mat-select 之外和mat-form-field 之内。请查看MatSelect 的form field features，了解有关如何在表单字段中使用它的更多信息。