Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add ability to replace/overwrite character in the middle of input instead of inserting

See original GitHub issue

Example project - https://stackblitz.com/edit/angular-5lfprb When I position cursor like that 123-4|56-789 and press any digit, input state becomes 123-40|5-678 - 0 inserted between 4 and 5, 9 is truncated. It would be good to have the ability to replace characters, so input state would be 123-40|6-789.

Issue Analytics

State:
Created 5 years ago
Comments:5

Top GitHub Comments

2reactions

mrmokwacommented, Apr 2, 2019

Yeah, got a similar issue with my telephone mask. In Brazil we can have (11) 1 1111-1111 and (22) 2222-2222 for telephone numbers. If a have a mask like (00) 9 0000-0000, when applying the mask, I’ll get (22) 22222-222 instead of (22) 2222-2222.

1reaction

thaylongscommented, May 31, 2019

Yeah, got a similar issue with my telephone mask. In Brazil we can have (11) 1 1111-1111 and (22) 2222-2222 for telephone numbers. If a have a mask like (00) 9 0000-0000, when applying the mask, I’ll get (22) 22222-222 instead of (22) 2222-2222.

I have the same problem

Hi @arthurfrancioni , I solve this with following code:

import {ChangeDetectorRef, Directive, Host, OnInit, Optional, SimpleChange} from '@angular/core';
import {MaskDirective} from "ngx-mask";

@Directive({
  selector: '[telefoneMask]'
})
export class TelefoneMaskDirective implements OnInit {

  mask11 = "(00) 0 0000-0000";
  mask10 = "(00) 0000-00009";
  currentMask = this.mask10;
  currentValue = null;

  constructor(private cdr: ChangeDetectorRef, @Host() @Optional() private mask: MaskDirective) {
  }

  ngOnInit(): void {
    this.mask.maskExpression = this.currentMask;
    this.mask.ngOnChanges({"maskExpression": new SimpleChange("", this.currentMask, true)});
    this.mask.registerOnChange((telefone) => {
      if (telefone != null && this.currentValue !== telefone) {
        this.currentValue = telefone;
        this.processInputChange(telefone);
      }
    });
    this.cdr.detectChanges();
  }

  private processInputChange(telefone: string) {
    if (telefone.length <= 10) {
      if (this.currentMask != this.mask10) {
        this.currentMask = this.mask10;
        setTimeout(() => {
          this.mask.ngOnChanges({"maskExpression": new SimpleChange(null, this.mask10, false)});
        }, 50);
      }
    } else {
      this.currentMask = this.mask11;
      setTimeout(() => {
        this.mask.ngOnChanges({"maskExpression": new SimpleChange(null, this.mask11, false)});
      }, 50);
    }
  }
}

To use:

<input class="form-control" [(ngModel)]="telefone" mask telefoneMask>

Is this code still valid? Did a quick test here and did not work.

Hi, try this version (with: this.control.control.setValue(this.currentValue)😉:

import {ChangeDetectorRef, Directive, Host, OnInit, Optional, SimpleChange} from '@angular/core';
import {MaskDirective} from "ngx-mask";
import {NgControl} from "@angular/forms";

@Directive({
  selector: '[telefoneMask]'
})
export class TelefoneMaskDirective implements OnInit {

  mask11 = "(00) 0 0000-0000";
  mask10 = "(00) 0000-00009";
  currentMask = this.mask10;
  currentValue = null;

  constructor(private control: NgControl,
              private cdr: ChangeDetectorRef,
              @Host() @Optional() private mask: MaskDirective) {
  }

  ngOnInit(): void {
    this.mask.maskExpression = this.currentMask;
    this.mask.ngOnChanges({"maskExpression": new SimpleChange("", this.currentMask, true)});
    this.mask.registerOnChange((telefone) => {
      if (telefone != null && this.currentValue !== telefone) {
        this.currentValue = telefone;
        this.control.control.setValue(this.currentValue);
        this.processInputChange(telefone);
      }
    });
    this.cdr.detectChanges();
  }

  private processInputChange(telefone: string) {
    if (telefone.length <= 10) {
      if (this.currentMask != this.mask10) {
        this.currentMask = this.mask10;
        setTimeout(() => {
          this.mask.ngOnChanges({"maskExpression": new SimpleChange(null, this.mask10, false)});
        }, 50);
      }
    } else {
      this.currentMask = this.mask11;
      setTimeout(() => {
        this.mask.ngOnChanges({"maskExpression": new SimpleChange(null, this.mask11, false)});
      }, 50);

    }
  }
}