没有反应形式的 Angular Material 验证

Question

我正在努力让 Angular Material 表单验证与 Angular Template 表单一起工作。所有示例都仅使用 react 形式。

我正在以下列形式生成模板 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

在阅读 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 可见性。