A Directive to format the view part of Formcontrol without changing the actual value
npm install ngx-format-field* 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.
https://angular-ydfct6.stackblitz.io/
* 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 }
Replace the ‘CURRENCY’ with the directive as per requirement.
``typescript`
import { NgxFormatFieldModule } from 'ngx-format-field';
imports: [ NgxFormatFieldModule ]
`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')">
| 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 | |