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

$3

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

$3

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

$3

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

For Currency:

`typescript
(change)="onChangeReactiveForm('currency')">
`
For Dynamic Regex Check:
`typescript
[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 | |