角度材质2选择错误未显示在控件下方

Question

Angular 4.4.4

Angular Material 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的{​​{3}}，了解有关如何在表单字段中使用它的更多信息。