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

Question

角 4.4.4

角材料 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获取有关如何在表单域中使用它的更多信息。