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 | |