如何在不使用 ts 文件的情况下显示最大限制错误消息？答案

【问题标题】：How to display max limit error message without using ts file in angular?如何在不使用 ts 文件的情况下显示最大限制错误消息？
【发布时间】：2022-11-23 01:35:00
【问题描述】：

我想显示错误消息，例如最大输入限制所需的错误消息，但使用下面的代码它适用于 required 但不适用于 maxlength 。我也不使用 ts 文件。有什么办法可以做到这一点。谢谢

<form #featureForm="ngForm">
<mat-form-field class="featureInputForm" appearance="fill">
  <mat-label>Feature Namre</mat-label>
  <input matInput [(ngModel)]="featureName" required name="featureName" maxlength="64" (ngModelChange)="moduleNameChange($event)" />
  <mat-error *ngIf="featureForm.controls['featureName']?.errors?.required">Feature Name is required.</mat-error>
  <mat-error *ngIf="featureForm.controls['featureName']?.errors?.maxlength">Maximum limit exceed.</mat-error>
</mat-form-field>
</form>

【问题讨论】：

标签： javascript node.js angular validation angular-material

【解决方案1】：

根据documentation for HTML attribute: maxlength，浏览器通常会阻止用户输入超过 maxlength 属性允许的文本。这解释了为什么您在输入时看不到错误消息。

但是，如果该值比 .ts 方面的最大长度长，那么您拥有的代码将呈现错误文本。例如，假设 maxlength=10 并且如果 featureName = '12345678901' <- string 比 maxlength 长，则错误消息将呈现在页面上。

有关示例，请参阅此 stackblitz。

【讨论】：