ngx-input-regulate
v1.0.0
Published
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.**
Downloads
390
Maintainers
Readme
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
- Install the package as show in the above section
- 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 { }
- Define the regex in ngxir-pattern attribute
- 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 [email protected]