输入元素的字符计数器

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 的求值实际上是真值 object，不是布尔值。

他的内容如下：

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

你可以绑定{{title.errors.minlength.actualLength}}任何你想获得标题输入字段字符数的地方。您也可以仅在 blur 事件上绑定可视化。

输入元素的字符计数器

Character counter for input element

angular

angular-forms

编辑

上一个回答