Angular 使用 material 在没有 formbuilder 的情况下显示错误的 2-8 种方法

Question

如何使用 Angular Material - 表单字段但不使用 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>

Answer 1

FormBuilder - 表单组使用 angular material 提供预建验证。如果您使用的是 ngModel，则必须使用 ngClass 将错误更改为红色。请检查如果 viewEncapsulation 设置为 none 或者您在 css 中使用 ng::deep o 在 ngModel Validation

中反映错误

Answer 2

如果您不想使用反应式表单，您可以使用模板驱动表单，这样您就可以获得您想要的验证。此外，如果您使用 [(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

Angular 使用 material 在没有 formbuilder 的情况下显示错误的 2-8 种方法

Angular 2-8 way to display error without formbuilder by using material

angular2-forms

angular

angular6

angular8