NgxFormatField

• A Directive to format the model value which will appear in the view. It will not manipulate the Input value which will be saved in the model. This Library act as a pipe for input field. Pipes are used to format the data before displaying in the View.

Demo

https://angular-ydfct6.stackblitz.io/

Usage

Add the following directive as per requirement:

• Comma Seperator Field with round off: [appFormatFields]="CURRENCY".
• Comma Seperator Field: [appFormatFields]="COMMA".
• Numeric Field with round off: [appFormatFields]="NUMERIC".
• Alphabet Field: [appFormatFields]="ALPHABET".
• For dynamic Regex Format: [appFormatFields]="PATTERN”, [formatRegex]="formatRegex" where ‘formatRegex’ is a dynamic regex pattern to be mentioned by the user in component.ts.
• We can add options to append or prepend a string, by using this directive tag: [options]="options" where option will be { prefix: string, suffix: string }

Implementation

Replace the ‘CURRENCY’ with the directive as per requirement.

1) In module.ts

import { NgxFormatFieldModule } from 'ngx-format-field';
imports: [ NgxFormatFieldModule ]

2) In component.ts

public CURRENCY: string;
public formatRegex: string;
uiForm = this.formBuilder.group({
currency: [''],
});
 
ngOnInit() {
 
this.CURRENCY = 'CURRENCY';
this. formatRegex = '^[0-9!@#$%^&]+$ ';
}
onChangeReactiveForm(key: string) {
this.uiForm.get(key).patchValue(this.uiForm.get(key).value);
}
onChangeTemplateDrivenForm(form: NgForm) {
form.form.get('name').patchValue(this.name);
this.name = this.name;
}

3) In HTML

For Currency:

  <input type="text" formControlName="currency" [appFormatFields]="CURRENCY"
   (change)="onChangeReactiveForm('currency')">

For Dynamic Regex Check:

 <input type="text" formControlName="pattern" [appFormatFields]="PATTERN" 
 [formatRegex]="uiForm.get('formatRegex').value"
  (change)="onChangeReactiveForm('pattern')">

Output

Directive Attribute	Attribute	Input	Value which will appear in the view on tab out	Input value which will be saved in the model
[appFormatFields]	[formatRegex]	NA	NA
"CURRENCY"	NA	12345.6789	12,346	12345.6789
	NA	abcd489739abc	NA
"COMMA"	NA	12345.6789	12,345.679	12345.6789
	NA	abcd489739abc	NA
"NUMERIC"	NA	1234.567	1235	1234.567
	NA	1234abc	NA
"ALPHABET"	NA	ABCDabcd	ABCDabcd	ABCDabcd
	NA	ABCDabcd1234	NA
"PATTERN"	^[0-9!@#$%^&]+$	123!@#$123	123!@#$123	123!@#$123
	NA	1234abc	NA