Question

在Angular中，当使用模板驱动的表单时，如何显示输入元素的字符计数器？

警告：由于我的验证逻辑，输入元素需要在blur上更新模型。但我希望字符计数器在change上更新，即在每次按键时更新。

<input
    type="text" 
    minlength="3"
    maxlength="20"
    required
    [(ngModel)]="model.title"
    name="title"
    #title="ngModel"
    id="title"
    class="form-control"
    [ngModelOptions]="{updateOn: 'blur'}
>

<!-- validation -->
<div *ngIf="title.touched && !title.valid" class="alert alert-danger">
    <div *ngIf="title.errors.required">Please enter a title</div>
    <div *ngIf="title.errors.minlength">Too short</div>
</div>

<!-- counter -->
<div class="counter>
    {{ model.title.length }}/20
    <!-- Problem: This way the counter will only update when the model updates -->
</div>

Answer 1

修改

您可以声明模板引用变量以引用该输入元素，访问value属性并按NgModel独立计算字符数。

<input
    type="text" 
    minlength="3"
    required
    [(ngModel)]="model.title"
    name="title"
    #title="ngModel"
    id="title"
    class="form-control"
    #titleRef
    [ngModelOptions]="{updateOn: 'blur'}
>

The character count is {{titleRef.value.length}}

以前的回答

title.errors.minlegth的评估实际上是一个真实的对象，而不是布尔值。

他的内容如下：

"requiredLength": 2,
"actualLength": ? // the actual length of your textfield, it gets updated at each keystroke

您可以将{{title.errors.minlength.actualLength}}绑定到您想要获取标题输入字段的字符数的位置。您也可以仅在blur事件上绑定可视化。

输入元素的字符计数器

1 个答案:

修改

以前的回答