Angular中不使用TS文件如何展示输入长度超限错误提示？

问题根源在于你使用的maxlength="64"是HTML原生属性，它会直接阻止用户输入超过64个字符，导致Angular表单控件的maxlength验证错误永远不会被触发，因此对应的错误提示无法显示。以下是两种无需TS文件的解决方案：

方案一：保留输入长度限制并触发验证提示 #

该方案仍限制用户输入不超过64字符，当用户尝试输入/粘贴超长内容（浏览器自动截断后），控件处于交互状态时会显示长度限制提示。

修改后的代码：

<form #featureForm="ngForm">
  <mat-form-field class="featureInputForm" appearance="fill">
    <mat-label>Feature Name</mat-label>
    <input 
      matInput 
      [(ngModel)]="featureName" 
      required 
      name="featureName" 
      [maxlength]="64" 
      (ngModelChange)="moduleNameChange($event)"
      #featureNameCtrl="ngModel"
    />
    <mat-error *ngIf="featureNameCtrl.invalid && (featureNameCtrl.dirty || featureNameCtrl.touched)">
      <span *ngIf="featureNameCtrl.errors?.required">Feature Name is required.</span>
      <span *ngIf="featureNameCtrl.errors?.maxlength">Maximum limit exceeded.</span>
    </mat-error>
  </mat-form-field>
</form>

关键改动：

• 使用[maxlength]="64"绑定属性，确保Angular添加表单验证器
• 添加#featureNameCtrl="ngModel"模板变量，直接在模板中获取控件的状态和错误信息
• 合并mat-error内容，通过*ngIf切换不同错误提示，确保同一时间只显示一个错误

方案二：允许输入超长内容并触发错误提示 #

如果你希望用户可以输入超过64字符，再触发长度超限提示，可使用正则表达式替代原生长度限制：

修改后的代码：

<form #featureForm="ngForm">
  <mat-form-field class="featureInputForm" appearance="fill">
    <mat-label>Feature Name</mat-label>
    <input 
      matInput 
      [(ngModel)]="featureName" 
      required 
      name="featureName" 
      pattern="^.{0,64}$"
      (ngModelChange)="moduleNameChange($event)"
      #featureNameCtrl="ngModel"
    />
    <mat-error *ngIf="featureNameCtrl.invalid && (featureNameCtrl.dirty || featureNameCtrl.touched)">
      <span *ngIf="featureNameCtrl.errors?.required">Feature Name is required.</span>
      <span *ngIf="featureNameCtrl.errors?.pattern">Maximum limit exceeded (max 64 characters).</span>
    </mat-error>
  </mat-form-field>
</form>

关键改动：

• 移除所有长度限制属性，改用pattern="^.{0,64}$"正则表达式验证输入长度
• 当输入内容长度超过64时，pattern错误会被触发，对应的提示会显示

内容的提问来源于stack exchange，提问作者adnan ali