javascript - Angular 5 所需的表单字段不适用于 Material

Question

我的第一个使用 Angular 5 的 Angular 应用。

我正在关注此处的文档:https://angular.io/guide/form-validation .这是我创建的表单:

<form class="form-container">
  <mat-form-field>
    <input matInput placeholder="Shop Name" [(ngModel)]="pizzaPlace.shopName"
           id="shopName" #shopName="ngModel"
           required minlength="4">
  </mat-form-field>
  <div *ngIf="shopName.invalid && (shopName.dirty || shopName.touched)"
       class="alert alert-danger">

    <div *ngIf="shopName.errors.required">
      Shop name is required.
    </div>
    <div *ngIf="shopName.errors.minlength">
      Shop name must be at least 4 characters long.
    </div>
  </div>
  <br/>
  <mat-form-field>
    <input matInput placeholder="Contact Name" [(ngModel)]="pizzaPlace.contactName"
           id="contactName" #contactName="ngModel"
           required minlength="4">
  </mat-form-field>
</form>

所以现在如果我正确阅读文档，输入和离开商店名称字段会产生错误，但它似乎不起作用。我没有任何迹象表明存在任何类型的问题。

Answer 1

模板驱动的表单需要一个name 属性。

<input matInput placeholder="Shop Name" [(ngModel)]="pizzaPlace.shopName"
       id="shopName" #shopName="ngModel"
       required minlength="4"
       name="shopName">

https://stackblitz.com/angular/eqormqnlkme

我强烈推荐使用 reactive forms ，它们并不更难掌握，而是更强大。

另外，angular-material 提供了一个用于错误处理的内置组件: mat-error