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.**
npm install ngx-input-regulate
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-regulateSteps to use
1. Install the package as show in the above section
2. Import the module
AppModule.ts
`typescript
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
`html
`
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
`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);
}
}
``Developer : Ahmed Ifhaam
ahmedifhaam1@gmail.com