Angular 2-8 使用材料在没有表单生成器的情况下显示错误的方法

Posted 2023-03-13

【中文标题】Angular 2-8 使用材料在没有表单生成器的情况下显示错误的方法

【英文标题】：Angular 2-8 way to display error without formbuilder by using material

【发布时间】：2020-02-03 14:34:08

【问题描述】：

如何在我的输入中显示验证错误，使用 Angular Material - Form Field，但没有 FormBuilder？ 我只想将它与 ngModel 一起使用

https://material.angular.io/components/form-field/overview

我的例子： 这就是我得到的和我想用 formBuilder 得到的

这就是我没有得到的东西

所以我的问题 - 如何在我的 html 中从 FormBuilder 编写逻辑？ 我们有办法写这样的东西吗？

<mat-form-field appearance="outline" *ngClass="if !reqDateFrom: ErrorInput">
    <mat-label>From Date</mat-label>
    <input matNativeControl [(ngModel)]="reqDateFrom" value="fromDate">
</mat-form-field>

【参考方案1】：

如果您不想使用响应式表单，则可以使用模板驱动的表单，然后您将获得所需的验证。另外，如果您使用的是[(ngModel)]，请不要使用value，而是将值设置为模型！

因此，如果您选择模板驱动的表单，请记住还要添加 name 属性，因为这是我们在后台注册表单控件的方式。所以试试：

<form #f="ngForm">
  <mat-form-field appearance="outline">
    <mat-label>From Date</mat-label>
      <input matNativeControl name="reqDateFrom" [(ngModel)]="reqDateFrom" required>
    <mat-error>Required</mat-error>
  </mat-form-field>
</form>

STACKBLITZ

【参考方案2】：

FormBuilder - 表单组使用角材料进行预构建验证。 如果您使用的是 ngModel，则必须使用 ngClass 更改为红色以防出错。 请检查 如果 viewEncapsulation 设置为 none 或者您在 css 中使用 ng::deep o 反映 ngModel Validation 中的错误