angular - 如何在表单之外检查 Angular 输入的有效性而不检查 ng-invalid？

Question

如何在不使用表单作为父项的情况下检查字段是否有效？

HTML:

<mat-form-field>
  <input
    #min
    matInput
    [ngModel]="min | transformMin"
    type="text"
    [pattern]="some-patern"
    (ngModelChange)="onChangeTransformMin($event)"
    (focusout)="updateMinMax()"
  />
</mat-form-field>

TS

目前，我用的是

this.min.nativeElement.classList.contains('ng-invalid')

但如果可能的话我想用其他方式来做？

Answer 1

将此添加到字段min="ngModel"

<mat-form-field>
  <input
    #min="ngModel"
    matInput
    [ngModel]="min | transformMin"
    type="text"
    [pattern]="some-patern"
    (ngModelChange)="onChangeTransformMin($event)"
    (focusout)="updateMinMax()"
  />
</mat-form-field>

<div *ngIf="min.errors.pattern">
    Invalid
</div>

https://angular.io/guide/form-validation