import { Component } from '@angular/core';
import { mobiscroll, MbscNumpadOptions } from '@mobiscroll/angular';
mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
dus: number;
ius: number;
de: number;
dusSettings: MbscNumpadOptions = {
fill: 'ltr',
template: '(ddd) ddd-dddd',
allowLeadingZero: true,
validate: (event, inst) => {
if (inst.isVisible()) {
// Display the formatted value
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
// Set the set button invalid until 10 chars filled
invalid: event.values.length != 10
};
},
formatValue: (numbers, variables, inst) => {
// specify how the value will be formatted
return (numbers.length > 2 ? '(' : '') + numbers.slice(0, 3).join('') + (numbers.length > 2 ? ') ' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
},
parseValue: (v, i) => {
if (v) {
return v.replace('(', '').replace(') ', '').replace('-', '');
}
}
};
iusSettings: MbscNumpadOptions = {
fill: 'ltr',
template: '+1-ddd-ddd-dddd',
allowLeadingZero: true,
validate: (event, inst) => {
if (inst.isVisible()) {
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
invalid: event.values.length != 10
};
},
formatValue: (numbers, variables, inst) => {
return '+1-' + numbers.slice(0, 3).join('') + (numbers.length > 2 ? '-' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
},
parseValue: (v, i) => {
if (v) {
return v.replace('+1', '').replace(/-/gm, '');;
}
}
};
deSettings: MbscNumpadOptions = {
fill: 'ltr',
template: '+49-dd-ddd-ddddd',
allowLeadingZero: true,
validate: (event, inst) => {
if (inst.isVisible()) {
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
invalid: event.values.length != 10
};
},
formatValue: (numbers, variables, inst) => {
return '+49-' + numbers.slice(0, 2).join('') + (numbers.length > 1 ? '-' : '') + numbers.slice(2, 5).join('') + (numbers.length > 4 ? '-' : '') + numbers.slice(5, 10).join('');
},
parseValue: (v, i) => {
if (v) {
return v.replace('+49', '').replace(/-/gm, '');
}
}
};
}
<mbsc-form>
<mbsc-input mbsc-numpad [(ngModel)]="dus" [mbsc-options]="dusSettings" input-style="box" label-style="stacked" placeholder="Enter phone number...">Domestic US</mbsc-input>
<mbsc-input mbsc-numpad [(ngModel)]="ius" [mbsc-options]="iusSettings" input-style="box" label-style="stacked" placeholder="Enter phone number...">International US</mbsc-input>
<mbsc-input mbsc-numpad [(ngModel)]="de" [mbsc-options]="deSettings" input-style="box" label-style="stacked" placeholder="Enter phone number...">International German</mbsc-input>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MbscModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
HttpClientJsonpModule
],
bootstrap: [AppComponent]
})
export class AppModule { }