Angular模板驱动表单：输入框字符计数器实时更新实现（模型blur约束）

这个问题问得好！我之前处理表单验证时机和实时UI反馈的时候刚好碰到过一模一样的场景，给你说下怎么解决：

核心矛盾在于 [ngModelOptions]="{updateOn: 'blur'}" 让模型只有在失焦时才同步，但我们需要实时获取输入内容来更新计数器——解决思路就是跳过绑定的模型，直接读取输入元素的原生值。

修改后的完整代码示例 #

<input 
  type="text" 
  minlength="3" 
  maxlength="20" 
  required 
  [(ngModel)]="model.title" 
  name="title" 
  #title="ngModel" 
  #titleInput  <!-- 新增模板引用，用于直接获取输入框的实时内容 -->
  id="title" 
  class="form-control" 
  [ngModelOptions]="{updateOn: 'blur'}"
>

<!-- 实时字符计数器 -->
<p>已输入字符: {{ titleInput.value ? titleInput.value.length : 0 }}/20</p>

<!-- 原有的验证逻辑可以保留 -->
<div *ngIf="title.invalid && (title.dirty || title.touched)" class="text-danger">
  <div *ngIf="title.errors?.['required']">标题不能为空</div>
  <div *ngIf="title.errors?.['minlength']">标题长度不能少于3个字符</div>
  <div *ngIf="title.errors?.['maxlength']">标题长度不能超过20个字符</div>
</div>

为什么这样可行？ #

• updateOn: 'blur' 仅控制 model.title 与表单控件的同步时机，输入框的原生value属性是随用户按键实时更新的，不受ngModel配置影响。
• 通过模板引用变量 #titleInput，我们可以直接在模板中访问输入框的实时值，以此计算字符长度，实现计数器的实时刷新。
• 加入 titleInput.value ? ... : 0 是为了处理输入框为空的边界情况，避免出现 undefined.length 的报错。

这样既满足了验证逻辑要求的模型失焦更新，又实现了字符计数器的实时响应，完全适配你的需求！

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