What is the best way to show the character count for every input in an Angular application?

In my app component, I have two input fields. I want to display the character count and max character limit for each input field dynamically as users type or blur on the input field.

To achieve this, I created a component that shows and hides the character count for each input field based on user input and blur events. However, I noticed a problem where the character count from one input field is being applied to another input field instead of the respective input.

For reference, you can check out the StackBlitz URL:

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

I would appreciate any help in resolving this issue. Thank you in advance.

javascriptangulartypescriptdom

Answer №1

Consider using a different identifier for the second input field

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Need assistance with jQuery AJAX?

Hey there, I'm a new member and I've gone through the different Ajax Help topics but still can't figure out why my code isn't working. Here's what I have: $(document).ready(function(){ $.ajax({ type: "GET", ur ...

javascriptjqueryajax

Could the process.exit hook be causing an endless loop?

When it comes to exiting a Node.js process, the native exit hook is essential: process.on('exit', function () { // listening for exit event }); This hook is typically triggered by calling process.exit(); // may perform some magical cleanup b ...

javascriptnode.js

Automatically authenticate ngrok password using Python and JS: A step-by-step guide

I have set up ngrok to expose my localhost running on a Raspberry Pi, and I have secured ngrok with a password. On another computer where I am using Django, which is outside of my network, I want to access a simple server webpage hosted on the Raspberry Pi ...

javascriptpythondjangongrok

Aggregate the values in an array and organize them into an object based on their frequency

I have an array of information structured like this: 0: { first: "sea", second: "deniz", languageId: "English-Turkish"} 1: { first: "play", second: "oynamak", languageId: "English-Turkish&qu ...

javascriptarraystypescriptsortinggroup-by

Angular 2 - The significance of using .subscribe with .map or .switchMap for console.log to function properly

In my simple component, I am extracting data from the Params object. One thing I've noticed is that when I remove the .subscribe() function, my debug code does not get executed properly. For example, if I were to comment out .subscribe(), the message ...

angulardictionaryobservable

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I pu ...

javascriptvue.jsvuejs2

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Experiencing a puzzling issue that even Google can't seem to solve. I keep getting the QuotaExceededError: DOM Exception 22 on my iPad3 running iOS7.0.4 with Safari 9537.53 (version 7, WebKit 537.51.1). Despite turning off private browsing and trying ...

javascriptioshtmlipadios7

Using async/await to handle the callback function

Here is a function that saves a user in the database: exports.saveUser = ({ first_name, last_name, email, password }) => { const query = "insert into users (first_name, last_name, email, password_hash) values ($1, $2, $3, $4) RETURNING *"; ...

javascriptnode.jsexpressasynchronousasync-await

Different approach to including labels on scatter plot without relying on "chartjs-plugin-datalabels"

I need help adding labels to the pink scatter dots without affecting the green bars in the horizontal bar chart generated by ngchart. You can see an image of the chart here. Whenever I try to include the following code: import ChartDataLabels from "c ...

angulartypescriptchart.js

build a key-value pair collection in Angular 2

Struggling to figure out how to create an associative array in Angular2? I've attempted the following: onSubmit(){ let inputfield:any[] = []; for(var i=0; i<this.inspectionform.value["inputfileds"].length; i++){ if(this.inspectionform.valu ...

arraysangulartypescript

What is the syntax for creating ES6 arrow functions in TypeScript?

Without a doubt, TypeScript is the way to go for JavaScript projects. Its advantages are numerous, but one of the standout features is typed variables. Arrow functions, like the one below, are also fantastic: const arFunc = ({ n, m }) => console.log(`$ ...

javascripttypescriptarrow-functions

Top Tips for Updating the CSS of a Nebular ngx-admin Component

If I want to modify the behavior or CSS style of a Nebular/NGX-admin component, what is the best way to go about it? I have tried adjusting the module directly in node_modules/@nebular, but I'm not sure if this is considered a good practice. Is ther ...

angularjsangularngx-admin

Retrieving session data from a different tab and website

The task at hand involves managing a PHP website (mysite.com) and an ASP.NET website (shop.mysite.com). The client's request is to implement a single sign-on solution for both sites. My approach is to develop a function on the ASP.NET site that can pr ...

javascriptasp.netauthenticationcross-site

Provide the identification number of a specific row within the modal

I am trying to pass the id of a specific row into a modal popup Link code: <a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="<? echo $row['id']; ?>">Resume</a> Modal code: <div ...

javascriptphpjqueryajaxtwitter-bootstrap

Step-by-step guide on how to import the socket.io npm package in Node.js

let socket = new Server(); import Server from 'socket.io'; Error: Module 'socket.io' does not have a default export ...

javascriptnode.jssocket.io

Is there a way to retrieve documents from mongodb by querying for documents whose ids are stored within the array variable `ids` using the $in operator

Can someone help me with querying all documents based on IDs from an array passed to my code via user input? var attackersIds = fights[i].attackersIds; attackers = cardsCollection.find({"_id" : { "$oid" : { $in: attackersIds } } }); However, I encountere ...

javascriptjsonmongodbmongodb-querymongojs

Generate an array in JavaScript using the values from input fields

Is there a way to create a JavaScript array that stores the values of all input fields with the class 'agency_field', when there are x number of these fields in the form? I attempted to achieve this using jQuery, but encountered a syntax error. ...

javascriptjquery

The teleport-controls feature is currently not functioning properly in VR mode with Aframe version 0.8.2

Having an issue with the teleport-controls under aframe 0.8.2. When in VR mode using Vive, only the curve appears after touching the trackpad of the controller, but the camera position does not change. However, in flat mode, both the curve and camera posit ...

javascriptaframewebvrhtc-vive

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Injecting CSS styles into dynamically inserted DOM elements

Utilizing Javascript, I am injecting several DOM elements into the page. Currently, I can successfully inject a single DOM element and apply CSS styling to it: var $e = $('<div id="header"></div>'); $('body').append($e); $ ...

javascriptjqueryhtmlcssdom