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

Question

如何在我的输入中显示验证错误，使用 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>

标签： angularangular6angular2-formsangular8

Answer 1

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

因此，如果您选择模板驱动的表单，请记住还要添加一个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>

堆栈闪电战