Angular 5 长度与字母数字验证问题：错误提示始终显示

看起来你遇到的问题是验证错误提示不管输入是否合法都一直显示对吧？这大概率是因为你的错误提示条件没有正确判断输入框的状态，或者验证规则没有正确绑定到控件上。我来帮你修正代码并解释原因：

首先，先把你截断的代码补全并修正：

<div class="col-md-4" *ngIf="this.context.risk.contractOrigin === 'Appel_d_offre'">
  <label class="control-label" for="numberTenderInvitation">Numéro d'appel d'offre</label>
  <input 
    class="form-control" 
    id="numberTenderInvitation" 
    name="numberTenderInvitation" 
    [(ngModel)]="context.risk.policyId" 
    #numberTender="ngModel"  <!-- 补全截断的ngModel引用 -->
    pattern="[A-Za-z0-9]+"  <!-- 添加字母数字的正则验证规则 -->
    required  <!-- 若字段必填可添加，可选 -->
  >
  <!-- 错误提示：仅在控件无效且用户已交互后显示 -->
  <div class="text-danger" *ngIf="numberTender.invalid && (numberTender.touched || numberTender.dirty)">
    Veuillez saisir uniquement des lettres et des chiffres.
  </div>
</div>

关键修正点解释： #

1. 完善ngModel引用：你之前的#numberTender="ngMo..."需要补全为#numberTender="ngModel"，这样才能正确获取Angular表单控件的状态对象，后续的验证判断才能生效。
2. 添加验证规则：通过pattern="[A-Za-z0-9]+"指定输入只能包含大小写字母和数字，如果需要允许空格或其他特定字符，可调整正则（比如[A-Za-z0-9 ]+允许空格）。
3. 错误提示的显示条件：*ngIf="numberTender.invalid && (numberTender.touched || numberTender.dirty)"是核心优化——
   • numberTender.invalid：判断输入内容不符合验证规则
   • numberTender.touched：用户已点击过输入框并离开
   • numberTender.dirty：用户已修改过输入框内容
     结合这两个交互状态的判断，能避免页面加载时就显示错误提示，只有用户和输入框交互后，才会触发验证提示。

为什么你的错误提示一直显示？ #

很大概率是你之前的错误提示条件只判断了numberTender.invalid，没有结合touched或dirty。页面加载时输入框初始值可能为空（或不符合规则），此时invalid为true，导致错误提示始终显示。加上交互状态判断后，就能解决这个问题。

如果需要更复杂的验证逻辑，也可以在组件类中自定义验证器，但上述方法对于简单的字母数字限制已经足够实用。

内容的提问来源于stack exchange，提问作者Nenad Bulatović