ammi pro asked 1 year ago


I am trying to change Input Mask based on selected country

html:

<div class="input-group">

            <div class="input-group-prepend">

                <mdb-select (selected)="changePhoneMask($event)">
                  <mdb-option [value]="'USA'">United States</mdb-option>
                  <mdb-option [value]="'CAN'">Canada</mdb-option>
                  <mdb-option [value]="'GBR'">United Kingdom</mdb-option>
                </mdb-select>

            </div>

            <input mdbInputMask="{{phoneMask}}" [clearIncomplete]="false" type="tel" class="form-control"
              formControlName="phone" />

          </div>

ts:

changePhoneMask(country: any ) {
    switch(country)
    {
    case 'USA':
    case 'CAN' : this.phoneMask='+1 (999) 999-9999 Ext: 9999'; break;
    case 'GBR': this.phoneMask='+44 999 999 9999'; break;
    }
}

expected: mask will change after country is selected. actual: when you select country, mask does not change. it will change only when you select phone control and leave it. How can I force mdbInputMask update ?

Thank you.


KieranFoot free commented 1 year ago

I'd suggest looking at the included source code and finding the functions called when the control is closed and call them manually to perform the actions you require.



In v5.1.0 we added a fix that should resolve this problem.


ammi pro commented 1 year ago

Thank you! I will try it.


Rafał Seifert free answered 1 year ago


We don't have update mechanism for dynamic inputs. We will have to look into this. As a workaround you can achieve desired effect with *ngIf directive and multiple inputs:

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-input-mask',
  templateUrl: './input-mask.component.html',
  styleUrls: ['./input-mask.component.scss'],
})
export class InputMaskComponent implements OnInit {
  constructor(private fb: FormBuilder) {}

  form = this.fb.group({
    phone: '',
  });
  ngOnInit(): void {}
  phoneMask: string;
  changePhoneMask(country: any) {
    switch (country) {
      case 'USA':
      case 'CAN':
        this.phoneMask = '+1 (999) 999-9999 Ext: 9999';
        break;
      case 'GBR':
        this.phoneMask = '+44 999 999 9999';
        break;
    }
  }
}

and template:

  <div class="input-group">
      <div class="input-group-prepend">
        <mdb-select (selected)="changePhoneMask($event)">
          <mdb-option [value]="'USA'">United States</mdb-option>
          <mdb-option [value]="'CAN'">Canada</mdb-option>
          <mdb-option [value]="'GBR'">United Kingdom</mdb-option>
        </mdb-select>
      </div>
      <form [formGroup]="form">
        <input
          *ngIf="!phoneMask"
          mdbInputMask=""
          [clearIncomplete]="false"
          type="tel"
          class="form-control"
          formControlName="phone"
        />
        <input
          *ngIf="phoneMask === '+1 (999) 999-9999 Ext: 9999'"
          mdbInputMask="{{ phoneMask }}"
          [clearIncomplete]="false"
          type="tel"
          class="form-control"
          formControlName="phone"
        />
        <input
          *ngIf="phoneMask === '+44 999 999 9999'"
          mdbInputMask="{{ phoneMask }}"
          [clearIncomplete]="false"
          type="tel"
          class="form-control"
          formControlName="phone"
        />
      </form>
    </div>

ammi pro commented 1 year ago

That is Ok solution for a few masks, but for all counties it will be absurdly large.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 4.1.0
  • Device: Laptop
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: No