我的第一个使用 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>
所以现在如果我正确阅读文档,输入和离开商店名称字段会产生错误,但它似乎不起作用。我没有任何迹象表明存在任何类型的问题。
最佳答案
模板驱动的表单需要一个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
关于javascript - Angular 5 所需的表单字段不适用于 Material ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48932857/