Угловая проверка материалов без реактивных форм

Question

Я изо всех сил пытаюсь заставить формы Angular Material работать с формами Angular Template. Все примеры работают только с реактивными формами.

Я создаю шаблонные формы 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 doc ( 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>

Таким образом, ключом был бит #sceneName="ngModel", который затем Angular использует для назначения допустимых / недействительных свойств, которые затем можно использовать для отображения ошибок с матами.

Answer 2

Это не чистое решение, а простой и выполнимый обходной путь. Подсказка может быть легко оформлена как ошибка и условно показана только в состоянии ошибки:

<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;
}