Placing gaps after every group of four digits

Question

Placing gaps after every group of four digits

I am currently working with Ionic 4 and Angular 8, attempting to insert a space every 4 digits entered by the user. However, the function I have written seems to be malfunctioning, as it inserts a space after each action the user takes following 4 numbers.

Here is the function I am using:

maskInput(input){

    let masked:
    Array<String> = input.replace(" ", "").split("");

    let res = "";

    for(let i = 0; i< masked.length; i++) {
    if(i % 4) res += masked[i]

      else res += " " + masked[i]

    }
    return res
  }

Is there an issue in my implementation of (ngModelChange) within ion-input? Could the problem lie within the for loop?

To address the spaces problem, I made the following code adjustment:

Array<String> = input.replace(" ", "").split(" ").join("").split("");

However, it still appears to count spaces as input.

angular typescript ionic-framework ionic4 angular8

Answer 1

Answer №1

I'm not quite sure what you're asking, but if you're looking for a way to insert spaces every 4 digits in a function, here's one :

const input = "765389764";

function addSpaceEvery4Digit(input) {
  let newInput = "";
  for (let i = 1; i < input.length; i++) {
    newInput += input.charAt(i);
    if ((i % 4 === 0) && i < input.length - 1) {
      newInput += " ";
    }
  }
  return newInput;
}

const res = addSpaceEvery4Digit(input);
console.log(res);

EDIT :

You should iterate over the string itself, not an array of strings, in your code :

change :

let masked:Array<String> = input.replace(" ", "").split("");

with :

let masked:string = input.replace(" ", "");

Answer 2

I'm not quite sure what you're asking, but if you're looking for a way to insert spaces every 4 digits in a function, here's one :

const input = "765389764";

function addSpaceEvery4Digit(input) {
  let newInput = "";
  for (let i = 1; i < input.length; i++) {
    newInput += input.charAt(i);
    if ((i % 4 === 0) && i < input.length - 1) {
      newInput += " ";
    }
  }
  return newInput;
}

const res = addSpaceEvery4Digit(input);
console.log(res);

EDIT :

You should iterate over the string itself, not an array of strings, in your code :

change :

let masked:Array<String> = input.replace(" ", "").split("");

with :

let masked:string = input.replace(" ", "");

Answer 3

Answer №2

Issue resolved by adjusting the split function in my code. Here is the updated function that successfully fixed the problem: (split, join, split)

maskInput(input) {

    const masked:
    // tslint:disable-next-line: ban-types
    Array<String> = input.replace(' ', '').split(' ').join('').split('');

    let res = '';

    for (let i = 0; i < masked.length; i++) {
    if (i > 0 && (i) % 4) { res += masked[i]; }

      // tslint:disable-next-line: one-line
      else { res += ' ' + masked[i]; }

    }
    console.log(input);
    return res;
  }

Answer 4

Issue resolved by adjusting the split function in my code. Here is the updated function that successfully fixed the problem: (split, join, split)

maskInput(input) {

    const masked:
    // tslint:disable-next-line: ban-types
    Array<String> = input.replace(' ', '').split(' ').join('').split('');

    let res = '';

    for (let i = 0; i < masked.length; i++) {
    if (i > 0 && (i) % 4) { res += masked[i]; }

      // tslint:disable-next-line: one-line
      else { res += ' ' + masked[i]; }

    }
    console.log(input);
    return res;
  }

Placing gaps after every group of four digits

Answer №1

EDIT :

Answer №2

Similar questions

Error in Svelte/Typescript: Encounter of an "unexpected token" while declaring a type

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

Tips for effective page management

Having trouble retrieving the `Content-Disposition` information from the backend response

Angular routing functions flawlessly on Chrome Mac but encounters issues on Chrome iOS

Navigating with Ionic - Initial Screen

Ways to Determine the Source and Destination Containers in Angular Drag and Drop

The issue arises when Jest fails to align with a custom error type while utilizing dynamic imports

Potential null object detected when using a ref(null)

Utilizing dynamic arguments in TypeScript to recycle types

What kind of ng-template is used for enforcing strict typing in Angular?

Tips for retrieving input values when they are not available in HTML documents

Do we really need TypeScript project references when transpiling with Babel in an Electron project using Webpack?

Obtain the numerical representation of a weekday based on the name of

Develop a flexible axios client

Encountering unproductive errors with custom editor extension in VS Code

Navigating to the root of a child component in Angular2 routing can be achieved by using the Router

Error: When trying to run the `ng build` command in Git Bash, TypeScript module cannot be

Why am I receiving a peculiar type error with @types/jsonwebtoken version 7.2.1?

Using template strings in a Mongoose update query when working with TypeScript