如何以角度显示每个输入的字符数？

Question

我在应用程序组件中有第一个和第二个输入，对于每个不同的输入更改，我想显示该特定输入的字符数/最大允许字符值仅在输入更改时和模糊之后我想隐藏字符数文本与动态组件.

所以我创建了一个组件来通过输入更改和模糊事件显示和隐藏输入字符长度/输入的最大长度字符，但是在输入值后的第一个输入框中..它应用字符计数并输入第二个输入框中的值字符计数适用于第一个输入框，它不适用于特定输入（即第二个输入框）

我附上 stackblitz 网址以供参考：-

https://stackblitz.com/edit/angular-focusinout-event-l5bcow?file=src%2Fapp%2Fapp.component.html

请帮我解决这个问题。

提前致谢。

Answer 1

只需使用另一个 ID 进行第二次输入

<div>
  <label>Second : </label>
  <br />
  <input
    name="date"
    type="text"
    [(ngModel)]="value"
    (input)="charactersLeft2.onInputChange($event)"
    (blur)="charactersLeft2.onBlurChange($event)"
    [maxlength]="5"
  />
  <app-count-character
    #charactersLeft2
    [maxCharacters]="5"
  ></app-count-character>
</div>

Answer 2

你有两个角色在 dom 上留下了 id。

这是解决您问题的 stackblitz 代码。