stable 1.0.0

Count

A live character counter for inputs and textareas, attribute-driven: add data-count-position and the badge appears, fed by the native maxlength/minlength. Link ng_formCount.js.

The displayed target is resolved in order: data-count-end → maxlength → minlength. The counter (a generated ng-count) sits in one of the four corners of the field. Type below to see it update.

Counter above the input (top-right)

count.html

<form class="ng-form">
    <div class="ng-field">
        <label class="ng-label" for="ct-title">Title (max 60)</label>
        <input type="text" class="ng-input" id="ct-title"
               maxlength="60"
               data-count-position="top-right"
               placeholder="Post title…">
    </div>
</form>

Counter below (bottom-right)

data-count-start="10" reflects the minlength requirement.

count.html

<form class="ng-form mb-32">
    <div class="ng-field">
        <label class="ng-label" for="ct-bio">Bio (min 10, max 280)</label>
        <textarea class="ng-textarea" id="ct-bio" rows="4"
                  minlength="10" maxlength="280"
                  data-count-position="bottom-right"
                  data-count-start="10"
                  placeholder="Write something…"></textarea>
    </div>
</form>

Explicit target (bottom-left)

No maxlength here: the target comes from data-count-end="40" (typing is not capped, the counter is informative).

count.html

<form class="ng-form mb-32">
    <div class="ng-field">
        <label class="ng-label" for="ct-slug">Slug (explicit target via data-count-end)</label>
        <input type="text" class="ng-input" id="ct-slug"
               data-count-position="bottom-left"
               data-count-end="40"
               placeholder="my-article-slug…">
    </div>
</form>

Attributes & API

`data-count-position`	`top-left` · `top-center` · `top-right` · `bottom-left` · `bottom-center` · `bottom-right` — required.
`data-count-start`	Minimum shown to the user (pairs with `minlength`).
`data-count-end`	Explicit target (overrides `maxlength`).

app.js

ng.count.refresh();   // recalc after adding fields dynamically

Anatomy

data-count-position data-count-start data-count-end ng-count (generated)

Reference

Generated from the component source (ng_formCount.js).

Component info

Name	`count`
Type	`js`
Version	`1.0.0`
Status	`stable`
JS	`/assets/js/ng_formCount.js`