Angular添加字符限制时出现'invalid'属性不存在错误求助

问题原因 #

你移除#content="ngModel"后，模板变量content默认指向原生HTMLTextAreaElement（DOM元素），而原生textarea元素并没有invalid属性——它只有oninvalid事件处理器，这才导致TypeScript抛出类型错误。

之前用#content="ngModel"时，content指向的是Angular的NgModel实例，这个实例本身会暴露invalid、touched等表单状态属性，所以不会报错。

两种解决方法 #

方法1：通过模板引用变量获取FormControl实例 #

在textarea上添加#content="formControl"导出指令，这样模板变量content就会指向Angular的FormControl实例，而非原生DOM元素，就能正常访问invalid属性：

<textarea 
  formControlName="wordLimitation"
  [maxlength]="maxChars"
  #content="formControl"
></textarea>

<mat-error *ngIf="content.invalid && content.touched">
  输入内容超出字符限制
</mat-error>

方法2：直接通过组件类的FormGroup访问控件状态 #

如果组件中已经定义了FormGroup（比如命名为formGroup），可以直接通过表单组获取控件状态，无需模板引用变量：
组件类代码示例：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent {
  maxChars = 200;
  formGroup = new FormGroup({
    wordLimitation: new FormControl('', [Validators.maxLength(this.maxChars)])
  });
}

模板代码示例：

<form [formGroup]="formGroup">
  <textarea 
    formControlName="wordLimitation"
    [maxlength]="maxChars"
  ></textarea>

  <mat-error *ngIf="formGroup.get('wordLimitation')?.invalid && formGroup.get('wordLimitation')?.touched">
    输入内容超出{{maxChars}}字符限制
  </mat-error>
</form>

注意：建议结合touched或dirty状态判断再显示错误提示，避免页面加载时就显示错误。

内容的提问来源于stack exchange，提问作者SH Dgl