Guide on automatically inserting a colon (:) after every pair of characters in Angular

I am looking to automatically insert a colon (:) after every 2 characters in my input field:

HTML

<input nz-input type="text" appLimitInput="textAndNumbers" name="mac" 
  formControlName="mac" (keydown.space)="$event.preventDefault();"
  onDrag="return false;" onDrop="return false;" onPaste="return false;">

Desired outcome:

For example, if I input AB, it should automatically become AB:. Similarly, if I then type CD,

it will be displayed as AB:CD. If I decide to delete/erase the CD, the colon should also be automatically removed.

So, if I enter AB:CD:EF:GH:IJ:KL, the input field should format it accordingly.

javascriptangulartypescript

Answer №1

If you want to add an input event to your input element that will trigger a component method to reformat its value, you can follow these steps:

Template:

<input (input)="reformat($event) />

Component:

reformat(event) {
  if (event.data) { // To avoid triggering on delete, ensure there is data in the event (the entered character)
    const two_chars_no_colons_regex = /([^:]{2}(?!:))/g;
    event.target.value = event.target.value.replace(two_chars_no_colons_regex, "$1:");
  }
}

Regex explanation:
/../g This is the Javascript regex literal syntax with the global flag which matches all occurrences of the regex pattern.
() - A selection group that we will reference later as $1
[^:] - Matches every character except colons
{2} - The preceding expression should occur twice
(?!:) - Ensure that there are no colons after the preceding expressions \

You can also check out this working StackBlitz example

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

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

javascripthtmlcss

Storing the radio button's selected value in local storage using Vue JS

I have a pair of radio buttons that are linked together to accept a boolean value, either true or false. I am trying to implement a functionality where the selected value is stored in local storage. For example, if true is chosen, then true will be saved i ...

javascriptvue.jsvuejs2local-storage

Leveraging NgRx for Managing Arrays

export class Ingredient { public name: string; public amount: number; constructor(name: string, amount: number) { this.name = name; this.amount = amount; } } List of Ingredients: export const initialIngredients: Ingredient ...

arraysangulartypescripttypeerrorngrx

JavaScript counter to monitor the number of requests made to the Open Weather Map API

Currently, I am utilizing the Open Weather Map's free API which allows me to make 1000 API calls per day through their One Call API. However, there is no built-in feature for tracking these calls in the Open Weather Map platform. To address this issue ...

javascriptapiopenweathermap

Guide to moving a 3D model and initiating animation in threejs when a key is pressed

In the midst of a project where a person (gltf object) walks based on key presses, I have successfully updated the object position accordingly. However, I'm encountering difficulty in rotating the object when the left/right keys are pressed and ensur ...

javascriptanimationthree.js3d

What is preventing me from accessing session data using nuxtServerInit?

When attempting to retrieve sessions, I encounter an issue. Is everything set up correctly in the following main files: server, config? store/index.js export const actions = { nuxtServerInit ({ commit }, { req }) { console.log(req); } The console log ...

javascriptvue.jsvuexnuxt.js

Error in Typescript: The data type 'string | undefined' does not meet the requirements of 'string | number | symbol' constraint

Working with typescript and react. Trying to dynamically adjust font size based on props (xs, sm, md, lg). Attempted using Record but encountering a typescript error. Error message: Type 'string | undefined' does not satisfy the constraint & ...

reactjstypescript

Guide to integrating a component within another component

Due to the size of this application, I am unable to utilize app.module. Unfortunately, the component I need to implement does not contain a module file. I have attempted to import it and utilize @NgModule, but it has not been successful. An error occur ...

angulartypescript

Press the button to switch between displaying one component and hiding another component within reactjs

I am working on a project with two distinct buttons: one for grid view and another for list view. <button onClick={() => setClassName('jsGridView')} title="Grid View" > <IoGrid className="active" s ...

javascriptreactjslistviewgridview

Securing Communication with HTTPS in Express JS

After purchasing an AlphaSSL from a hosting provider, I received the following files: domain.csr.crt domain.interCert.crt domain.PKCS7Cert.crt domain.rootCert.crt domain.X509Cert.crt However, in order to enable HTTPS on Node.JS using Express, I am aware ...

javascriptnode.jsexpresshttps

Tips for managing multiple events within a single component in Angular 4

Currently, I am working on developing a user interface layer for an application using Angular 4. The page layout I have consists of displaying data in tables based on search criteria. At the moment, I have code that displays the data in one HTML file (rec ...

jqueryangularuser-interfaceresponsive-design

Creating custom designs for a HTML button using CSS

Within an HTML form, there are two buttons set up as follows: <button kmdPrimaryButton size="mini" (click)="clickSection('table')">Table View</button> <button kmdPrimaryButton size="mini" (click)=&quo ...

htmlcsstypescript

Easily fetching data with AJAX through jQuery

Completely new to using jQuery and AJAX, I attempted the code below for a simple http get request: <html> <head> </head> <body> <script src = "jquery-2.1.4.js"></script> <script src = "app.js"></script& ...

javascriptjqueryajaxhttp-get

Although Angular allows for CSS to be added in DevTools, it seems to be ineffective when included directly in

Looking to set a maximum length for ellipsis on multiline text using CSS, I tried the following: .body { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } However, this approach did not work. Interesti ...

cssangular

AngularJS Default Option Selection

I am encountering some difficulties with the preselection of a select-input in angularJS. The select-box is being populated by an array. <select class="form-control" ng-model="userCtrl.selected_country" ng-options="country.name for country in userCt ...

javascriptangularjsangularjs-select

Acquire the Angular Type<> directly from the component instance in Angular 5

First and foremost, I want to clarify that my requirement is for the Angular Type instance of a component, not just the TypeScript definition. The current scenario is as follows: I am working within a service where I receive an input of the actual instanc ...

angularangular5factory

What discrepancies exist between running npm install on Windows versus Linux operating systems?

Just have a quick question to ask. I've been searching online with no luck. If I were to run npm install on a Windows machine to set up my dependencies, would it be viable to transfer the node_modules directory to a Linux machine and execute my nodej ...

javascriptnode.jsnpmnpm-install

Issues arise with the functionality of CSS and JavaScript after successfully deploying a Next.js and React project to the server side

I need to deploy my React+Next and Node.js projects on the same port. To achieve this, I converted my TypeScript files to JavaScript and moved the .next folder to the backend side. Now, my API and frontend code are functioning on the same port thanks to Ex ...

javascriptnode.jsreactjsnext.js

The correct way to create a Reaction Collection

I'm trying to set up an event where a user triggers a reaction with either a Check mark or X. However, I keep encountering an error that the function doesn't exist for the message object. I attempted to switch back to awaitReactions but it didn& ...

javascriptnode.jsexpressdiscord.js

``I am experiencing slow loading times with Google Maps JS when using

When accessing Google Maps on Safari, zooming in can be frustratingly slow on both Windows and Mac. The experience feels glitchy, with the zoom starting, freezing, then finally finishing. In comparison, Chrome provides a much smoother and faster zooming ex ...

javascriptiosgoogle-mapssafari