mdbInputMask

Topic: mdbInputMask

ammi pro asked 11 months 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 pro premium priority commented 11 months 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.

Add comment

r.seifert staff answered 11 months ago

0 0 Best answer

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 11 months ago

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

Add comment

Arkadiusz Idzikowski staff answered 6 months ago