NgxInputRegulate

This package is designed to restrict inputs in Angular Reactive form input controls. Based on a regex pattern users can restrict the inputs. This will work for copy pasting as well.

RegEx for common scenarios

1. Integer: ^[0-9 ]*$
2. float: ^[+-]?([0-9]*[.])?[0-9]+$
3. words: ([A-z]*\\s)*$

Any custom regex you might make will be also compatible. 

How to Install

Enter the following command in your project root folder (as usual) npm i ngx-input-regulate

Steps to use

1. Install the package as show in the above section
2. Import the module AppModule.ts

    import { NgModule } from  '@angular/core';
    import { FormsModule, ReactiveFormsModule } from  '@angular/forms';
    import { BrowserModule } from  '@angular/platform-browser';
    
    import { ngxInputRegulateModule } from  'ngx-input-regulate';
    
    import { AppComponent } from  './app.component';
    
    @NgModule({
   		 declarations: [AppComponent],
   		 imports: [
   			 BrowserModule,
   			 FormsModule,
   			 ReactiveFormsModule,
   			 ngxInputRegulateModule
   			 ],
   		  providers: [],
   		  bootstrap: [AppComponent]
   		  })
   export  class  AppModule { } 

3. Define the regex in ngxir-pattern attribute
4. Add the ngxInputRegulate Directive AppComponent.html

   <form  [formGroup]="formGroup">
   	<input  ngxInputRegulate  ngxir-pattern="^[1-3]*$"  formControlName="namecontrol">
   	This is the value of name : {{name}}
   </form>

Here the input is regulated to have only integer values from 1 or 2 or 3 any other inputs will be restricted

Adding the ts file for reference

AppComponent.ts

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

@Component({
	selector:  'app-root',
	templateUrl:  './app.component.html',
	styleUrls: ['./app.component.css']
	})

export  class  AppComponent  implements  OnInit{
	name = ''
	formGroup: FormGroup = new  FormGroup({
		namecontrol:  new  FormControl('')
	});
	ngOnInit(): void {
		this.formGroup.controls.namecontrol.valueChanges.subscribe(v  =>  this.name = v);
	}
}

Example

Please find the complete example at stackblits https://angular-ivy-zmqusk.stackblitz.io

Github-Link

Feel free to create issues at : https://github.com/ahmedifhaam/ngx-input-regulate/issues

License

GPL-V3 - https://www.gnu.org/licenses/gpl-3.0.txt

Developer : Ahmed Ifhaam ahmedifhaam1@gmail.com