Topic: mdbInputMask
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.
Arkadiusz Idzikowski staff answered 1 year ago
In v5.1.0 we added a fix that should resolve this problem.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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.