Ngx-mask: Add ability to replace/overwrite character in the middle of input instead of inserting

[LaserUnicorns]

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.

[mrmokwa]

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.

[arthurfrancioni]

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

[thaylongs]

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>

[fabeider]

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.

[thaylongs]

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);

    }
  }
}