Angular MAT：表单验证导致 "jit_nodeValue_6(...).hasError() is not a function"

Question

我不确定为什么会收到以下错误：ERROR TypeError: jit_nodeValue_6(...).hasError is not a function

看起来 Angular 不喜欢我给 title.hasError() 的电话。有人知道为什么吗？谢谢！

这是我的 HTML 模板：

<form [formGroup]="detailsForm">
    <mat-form-field >        
        <input matInput placeholder="Title" formControlName="title" name="title" #title>
        <mat-error *ngIf="title.hasError('required')">
                Title is <strong>required</strong>
        </mat-error>         
    </mat-form-field>
    ...
</form>

Answer 1

如果你想检查 FormControl 错误，那么你可以考虑 FormControlDirective 将 FormControl 作为 @Input: 例子

  <input name="name" [formControl]="name">

否则访问 FormControl 作为 formGroup 的属性以及 .? safe-navigation-operator aka elvis operator

 detailsForm?.controls?.title?.hasError('required')

修改代码

<div class="example-container">
    <form [formGroup]="detailsForm">
        <mat-form-field >        
            <input matInput placeholder="title" formControlName="title" name="title" #title>
            <mat-error *ngIf="detailsForm?.controls?.title?.hasError('required')">
                  <p>Required</p>
            </mat-error>         
        </mat-form-field>
    </form>
    </div>

stackblitz

Answer 2

您可以使用 ngIf 如下：

*ngIf="detailsForm.get('title').hasError('required')"

因此，您必须按以下方式更改 mat-error 标记中的 ngIf：

<form [formGroup]="detailsForm">
    <mat-form-field >        
        <input matInput placeholder="Title" formControlName="title" name="title" #title>
        <mat-error *ngIf="detailsForm.get('title').hasError('required')">
                Title is <strong>required</strong>
        </mat-error>         
    </mat-form-field>
    ...
</form>

Answer 3

您可以通过使用 ngModel

以更简单的方式使用 ('hasError')

<div class="example-container">
    <form [formGroup]="detailsForm">
        <mat-form-field >        
            <input matInput placeholder="title" formControlName="title" ngModel name="title" #title="ngModel">
            <mat-error *ngIf="title?.hasError('required')">
                  <p>Required</p>
            </mat-error>         
        </mat-form-field>
    </form>
    </div>

Angular MAT：表单验证导致 "jit_nodeValue_6(...).hasError() is not a function"

Angular MAT: Form validation causes "jit_nodeValue_6(...).hasError() is not a function"

angular-material2

angular-validation

angular