Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile number validation

Browse Source
This commit is contained in:
surendar.m@watermelon.us 2023-04-17 17:23:09 +05:30
parent 3d096b4cf3
commit 50b5a5e511
18 changed files with 205 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.html
View File

@ -23,11 +23,11 @@
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="card-mat-pane"> <mat-form-field appearance="outline" class="card-mat-pane">
<mat-label>Phone</mat-label> <mat-label>Phone</mat-label>
<input placeholder=" Phone" matInput formControlName="phoneNo"> <input placeholder=" Phone" type="text" appMobileNumberPattern maxlength="10" minlength="10" matInput formControlName="phoneNo">
<!-- <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error> --> <mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="popup-button"> <div class="popup-button">

5
ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.ts
View File

@ -17,11 +17,14 @@ export class AppointmentAddcustomerComponent implements OnInit {
this.form = new FormGroup({ this.form = new FormGroup({
name: new FormControl('', [Validators.required]), name: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required]), email: new FormControl('', [Validators.required]),
phoneNo: new FormControl('', [Validators.required]), phoneNo: new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
}); });
} }
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}
save(){ save(){
} }

4
ng-seed/src/app/appoinment/business/add-business/add-business.component.html
View File

@ -25,7 +25,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input type="number" placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo"> <input type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
<mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
@ -59,7 +59,7 @@
<img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/> <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
<img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/> <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
<input type='file'accept="image/*" data-max-size="2048" style="width: 50%;" (change)="onSelectFile($event)" formControlName="logo"><br> <input type='file'accept="image/*" data-max-size="2048" style="width: 50%;" (change)="onSelectFile($event)" formControlName="logo"><br>
<span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg anf png)</span> <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg and png)</span>
</div> </div>
<div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="start end"> <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="start end">
<mat-checkbox *ngIf="action != 'Update'" class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox> <mat-checkbox *ngIf="action != 'Update'" class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox>

2
ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
View File

@ -97,7 +97,7 @@ export class AddBusinessComponent implements OnInit {
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]), ),]),
contactNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10),Validators.pattern('^[0-9]{10}$')]), contactNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
createdBy:new FormControl(userrole,[Validators.required]), createdBy:new FormControl(userrole,[Validators.required]),
}); });

2
ng-seed/src/app/appoinment/business/business.module.ts
View File

@ -56,7 +56,7 @@ const customNotifierOptions: NotifierOptions = {
@NgModule({ @NgModule({
declarations: [ declarations: [
BusinessListComponent, BusinessListComponent,
AddBusinessComponent AddBusinessComponent,
], ],
imports: [ imports: [

2
ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.html
View File

@ -23,7 +23,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phoneNo" formControlName="phoneNo"> <input placeholder=" Phone" type="text" appMobileNumberPattern maxlength="10" minlength="10" matInput [(ngModel)]="local_data.phoneNo" formControlName="phoneNo">
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>

12
ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.ts
View File

@ -52,15 +52,15 @@ export class AddCustomersComponent implements OnInit {
this.form = new FormGroup({ this.form = new FormGroup({
// businessselect: new FormControl('', [Validators.required]), // businessselect: new FormControl('', [Validators.required]),
// image: new FormControl('', null), // image: new FormControl('', null),
cusName: new FormControl('', [Validators.required, Validators.maxLength(20)]), cusName: new FormControl('', [Validators.required]),
address_1: new FormControl('', [Validators.required, Validators.maxLength(50)]), address_1: new FormControl('', [Validators.required, Validators.maxLength(100)]),
city: new FormControl('', [Validators.required, Validators.maxLength(10)]), city: new FormControl('', [Validators.required]),
state: new FormControl('', [Validators.required, Validators.maxLength(10)]), state: new FormControl('', [Validators.required]),
pincode: new FormControl('', [Validators.required, Validators.maxLength(10)]), pincode: new FormControl('', [Validators.required, Validators.maxLength(6)]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]), ),]),
phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]), phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
}); });
this.form.patchValue(this.local_data) this.form.patchValue(this.local_data)

2
ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
View File

@ -87,7 +87,7 @@ export class CustomersListComponent implements OnInit {
this._app.getAppoinmentsListDetails(param).subscribe(res => { this._app.getAppoinmentsListDetails(param).subscribe(res => {
if (res.status == 200) { if (res.status == 200) {
this.appoinmentsList = res.data; this.appoinmentsList = res.data;
this.recordStatus=true; // this.recordStatus=true;
let id = localStorage.getItem('user_id') let id = localStorage.getItem('user_id')
console.log(id) console.log(id)
console.log(this.appoinmentsList) console.log(this.appoinmentsList)

2
ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
View File

@ -38,7 +38,7 @@ closeDialog(){
ngOnInit() { ngOnInit() {
this.form = new FormGroup({ this.form = new FormGroup({
servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]), servicesName: new FormControl('', [Validators.required]),
duration: new FormControl('',[Validators.required]), duration: new FormControl('',[Validators.required]),
description: new FormControl('',[Validators.required]), description: new FormControl('',[Validators.required]),
fees:new FormControl('',[Validators.required]) fees:new FormControl('',[Validators.required])

7
ng-seed/src/app/appoinment/user/add-user/add-user.component.html
View File

@ -21,7 +21,6 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="myError('businessselect', 'required')">business is required</mat-error> <mat-error *ngIf="myError('businessselect', 'required')">business is required</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane" [readonly]="true"> <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane" [readonly]="true">
<mat-label>Role</mat-label> <mat-label>Role</mat-label>
@ -31,7 +30,7 @@
{{roleNmae.name}} {{roleNmae.name}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error> <mat-error *ngIf="myError('role', 'required')">role is required</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
@ -52,7 +51,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<mat-label>Phone No</mat-label> <mat-label>Phone No</mat-label>
<input matInput type="number" placeholder="Enter Phone No" formControlName="contactNo" id="contactNo"> <input matInput type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Enter Phone No" formControlName="contactNo" id="contactNo">
<mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
@ -80,7 +79,7 @@
<img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/> <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
<img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/> <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
<input type='file'accept="image/*" data-max-size="2048" style="width: 33%;" (change)="onSelectFile($event)" formControlName="logo"><br> <input type='file'accept="image/*" data-max-size="2048" style="width: 33%;" (change)="onSelectFile($event)" formControlName="logo"><br>
<span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg anf png)</span> <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg and png)</span>
<!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> <!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="ConfirmPassword" matInput formControlName="confirmPassword"> <input placeholder="ConfirmPassword" matInput formControlName="confirmPassword">
<mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error> <mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>

3
ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
View File

@ -53,7 +53,7 @@ export class AddUserComponent implements OnInit {
role: new FormControl('', [Validators.required]), role: new FormControl('', [Validators.required]),
userName: new FormControl('', [Validators.required]), userName: new FormControl('', [Validators.required]),
// contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]), // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
contactNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]), contactNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
// lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]), // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
@ -74,6 +74,7 @@ export class AddUserComponent implements OnInit {
this.form.patchValue(this.local_data) this.form.patchValue(this.local_data)
}, 500); }, 500);
} }
public myError = (controlName: string, errorName: string) =>{ public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName); return this.form.controls[controlName].hasError(errorName);
} }

3
ng-seed/src/app/appoinment/user/user.module.ts
View File

@ -53,7 +53,8 @@ const customNotifierOptions: NotifierOptions = {
@NgModule({ @NgModule({
declarations: [ declarations: [
UserListComponent, UserListComponent,
AddUserComponent AddUserComponent,
], ],
imports: [ imports: [
DemoMaterialModule, DemoMaterialModule,

2
ng-seed/src/app/end-user/customer-info/customer-info.component.html
View File

@ -31,7 +31,7 @@
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80"> <div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" [readonly]="verifyOTP == '1'" required> <input matInput type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No" name="phone" formControlName="phoneNo" [readonly]="verifyOTP == '1'" required>
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>

12
ng-seed/src/app/end-user/customer-info/customer-info.component.ts
View File

@ -44,12 +44,12 @@ export class CustomerInfoComponent implements OnInit {
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]), ),]),
phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]), phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
address_1: new FormControl('', [ Validators.maxLength(50)]), address_1: new FormControl('', [ Validators.maxLength(100)]),
city: new FormControl('', [ Validators.maxLength(10)]), city: new FormControl(''),
state: new FormControl('', [ Validators.maxLength(10)]), state: new FormControl(''),
otp: new FormControl('', [ Validators.maxLength(10)]), otp: new FormControl('', [ Validators.maxLength(6),Validators.minLength(6)]),
pincode: new FormControl('',[ Validators.maxLength(6)]), pincode: new FormControl(''),
}); });
} }

8
ng-seed/src/app/session/register/register.component.ts
View File

@ -21,10 +21,10 @@ export class RegisterComponent {
ngOnInit() { ngOnInit() {
this.form = new FormGroup({ this.form = new FormGroup({
bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]), bus_name: new FormControl('', [Validators.required]),
address: new FormControl('', [Validators.required, Validators.maxLength(50)]), address: new FormControl('', [Validators.required, Validators.maxLength(100)]),
city: new FormControl('', [Validators.required, Validators.maxLength(10)]), city: new FormControl('', [Validators.required]),
state: new FormControl('', [Validators.required, Validators.maxLength(10)]), state: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]), ),]),

185
ng-seed/src/app/shared/demo.module.ts
View File

@ -41,58 +41,149 @@ import {PortalModule} from '@angular/cdk/portal';
import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { FlexModule } from '@angular/flex-layout'; import { FlexModule } from '@angular/flex-layout';
import { MobileNumberPatternDirective } from './mobile_number_pattern/mobile-number-pattern.directive';
/** /**
* NgModule that includes all Material modules that are required to serve the demo-app. * NgModule that includes all Material modules that are required to serve the demo-app.
*/ */
const modules = [ // const modules = [
MatCardModule, // MatCardModule,
MatAutocompleteModule, // MatAutocompleteModule,
MatButtonModule, // MatButtonModule,
MatButtonToggleModule, // MatButtonToggleModule,
MatCheckboxModule, // MatCheckboxModule,
MatChipsModule, // MatChipsModule,
MatTableModule, // MatTableModule,
MatDatepickerModule, // MatDatepickerModule,
MatDialogModule, // MatDialogModule,
MatDividerModule, // MatDividerModule,
MatExpansionModule, // MatExpansionModule,
MatFormFieldModule, // MatFormFieldModule,
MatGridListModule, // MatGridListModule,
MatIconModule, // MatIconModule,
MatInputModule, // MatInputModule,
MatListModule, // MatListModule,
MatMenuModule, // MatMenuModule,
MatPaginatorModule, // MatPaginatorModule,
MatProgressBarModule, // MatProgressBarModule,
MatProgressSpinnerModule, // MatProgressSpinnerModule,
MatRadioModule, // MatRadioModule,
MatRippleModule, // MatRippleModule,
MatSelectModule, // MatSelectModule,
MatSidenavModule, // MatSidenavModule,
MatSlideToggleModule, // MatSlideToggleModule,
MatSliderModule, // MatSliderModule,
MatSnackBarModule, // MatSnackBarModule,
MatSortModule, // MatSortModule,
MatStepperModule, // MatStepperModule,
MatTabsModule, // MatTabsModule,
MatToolbarModule, // MatToolbarModule,
MatTooltipModule, // MatTooltipModule,
MatNativeDateModule, // MatNativeDateModule,
CdkTableModule, // CdkTableModule,
A11yModule, // A11yModule,
BidiModule, // BidiModule,
CdkAccordionModule, // CdkAccordionModule,
ObserversModule, // ObserversModule,
OverlayModule, // OverlayModule,
PlatformModule, // PlatformModule,
PortalModule, // PortalModule,
FlexModule, // FlexModule,
FormsModule, // FormsModule,
ReactiveFormsModule] // ReactiveFormsModule]
@NgModule({ @NgModule({
imports: [...modules], declarations:[MobileNumberPatternDirective],
exports: [...modules] imports: [
MatCardModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatChipsModule,
MatTableModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatNativeDateModule,
CdkTableModule,
A11yModule,
BidiModule,
CdkAccordionModule,
ObserversModule,
OverlayModule,
PlatformModule,
PortalModule,
FlexModule,
FormsModule,
ReactiveFormsModule],
exports: [
MatCardModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatChipsModule,
MatTableModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatNativeDateModule,
CdkTableModule,
A11yModule,
BidiModule,
CdkAccordionModule,
ObserversModule,
OverlayModule,
PlatformModule,
PortalModule,
FlexModule,
FormsModule,
ReactiveFormsModule,
MobileNumberPatternDirective]
}) })
export class DemoMaterialModule {} export class DemoMaterialModule {}

8
ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { MobileNumberPatternDirective } from './mobile-number-pattern.directive';
describe('MobileNumberPatternDirective', () => {
it('should create an instance', () => {
const directive = new MobileNumberPatternDirective();
expect(directive).toBeTruthy();
});
});

18
ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.ts Normal file
View File

@ -0,0 +1,18 @@
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appMobileNumberPattern]'
})
export class MobileNumberPatternDirective {
constructor(private _el: ElementRef) { }
@HostListener('input', ['$event']) onInputChange(event) {
const initalValue = this._el.nativeElement.value;
this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
if ( initalValue !== this._el.nativeElement.value) {
event.stopPropagation();
}
}
}