Question

我正在努力使用Angular Template表单进行Angular Material表单验证工作。所有示例仅适用于反应形式。

我正在以以下形式生成模板Angular Material模板形式：

<mat-form-field *ngSwitchCase="'text'" class="entity-form-field" appearance="outline">
  <input matInput [placeholder]="field.title" [value]="getValue(field)" 
    (change)="setValue(field, $event)" [required]="field.req" [id]="field.id">
  <mat-error *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</mat-error>
</mat-form-field>

fieldInvalid 和 getErrorMessage 都可以正常工作，因此字段错误消息应该可见。如果我将其更改为其他标签，则它将可见：

<p *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</p>

我知道Reative Forms必须更改输入的状态以更改其样式以使其可见。

有没有一种方法可以使用简单的模板表单？我可能也可以应用Angular Material错误样式，但是找不到文档。

Answer 1

这不是一个纯粹的解决方案，而是简单可行的解决方法。 垫提示可以轻松地设置为错误样式，并且仅在错误状态下有条件地显示：

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput ...>
  <mat-hint class="error-hint" *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</mat-hint>
</mat-form-field>

和错误提示类：

.error-hint {
  color: red;
}

Answer 2

阅读Angular文档（https://angular.io/guide/forms）后已解决此问题：

<mat-form-field>
<input matInput [(ngModel)]="scenario.name" name="scenarioName" 
#scenarioName="ngModel"
placeholder="Scenario name" class="form-control"
required minlength="3">
<mat-error [hidden]="scenarioName.valid">Scenario name should have at least 3 symbols</mat-error>
</mat-form-field>

因此，关键是＃scenarioName =“ ngModel”位，然后Angular会使用该位来分配有效/无效的属性，然后将这些属性用于mat-error可见性。

没有反应形式的角材料验证

2 个答案: