angular - 如何在没有表单控件但使用 matInput 的情况下显示 mat-error 消息？

Question

我的 Material table 中有此代码:

<ng-container matColumnDef="columnDef">
   <th mat-header-cell *matHeaderCellDef>Column heading</th>
   <td mat-cell *matCellDef="let row">
       <mat-form-field>
             <input matInput [(ngModel)]="row.myField">
             <mat-error *ngIf="row.myField > 0"> My error message </mat-error>
        </mat-form-field>
   </td>
</ng-container>

问题是 mat-form-field 不是 FormControl ，但如果 mat-error 能以某种方式验证此输入并显示错误消息，那就太好了。

有人可以告诉我是否可能吗？

Answer 1

您可以使用具有自定义样式的 span 属性:

<mat-form-field>
      <input matInput [(ngModel)]="row.myField">
      <span *ngIf="row.myField > 0"
             class="error">My error message
      </span>
</mat-form-field>

component.css(这只是一个例子)

.error {
  font-size: 10px;
  color: red;
}