{"id":17056279,"url":"https://github.com/biophoton/angular-formatter-parser","last_synced_at":"2025-04-12T17:26:04.786Z","repository":{"id":57178439,"uuid":"90963310","full_name":"BioPhoton/angular-formatter-parser","owner":"BioPhoton","description":"Angular Formatter Parser - The AngularJS Port - Easy to implement and elegant to use it also provides the possibility to register custom transform functions.","archived":false,"fork":false,"pushed_at":"2018-05-18T13:17:05.000Z","size":2011,"stargazers_count":50,"open_issues_count":4,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T17:06:34.003Z","etag":null,"topics":["angular","angular-directives","angular-formatter-parser","formatter","input-method","parser"],"latest_commit_sha":null,"homepage":"https://github.com/BioPhoton/angular-formatter-parser","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BioPhoton.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-11T09:42:58.000Z","updated_at":"2023-08-14T14:30:13.000Z","dependencies_parsed_at":"2022-09-09T17:11:35.903Z","dependency_job_id":null,"html_url":"https://github.com/BioPhoton/angular-formatter-parser","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-formatter-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-formatter-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-formatter-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-formatter-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioPhoton","download_url":"https://codeload.github.com/BioPhoton/angular-formatter-parser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248603563,"owners_count":21131819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-directives","angular-formatter-parser","formatter","input-method","parser"],"created_at":"2024-10-14T10:23:55.341Z","updated_at":"2025-04-12T17:26:04.760Z","avatar_url":"https://github.com/BioPhoton.png","language":"TypeScript","readme":"# angular-formatter-parser\n\n#### Angular Formatter Parser - The AngularJS Port\nThis library provides an option to hook into the value flow of inputs and other \"editable\" html elements.\nEasy to implement and elegant to use it also provides the possibility to register custom transform functions over an InjectionToken.\n\n![License](https://img.shields.io/npm/l/angular-formatter-parser.svg)\n[![NPM Version](https://img.shields.io/npm/v/angular-formatter-parser.svg)](https://www.npmjs.com/package/angular-formatter-parser)\n[![Build Status](https://travis-ci.org/BioPhoton/angular-formatter-parser.svg?branch=master)](https://travis-ci.org/BioPhoton/angular-formatter-parser)\n[![Coverage Status](https://coveralls.io/repos/github/BioPhoton/angular-formatter-parser/badge.svg?branch=master)](https://coveralls.io/github/BioPhoton/angular-formatter-parser?branch=master)\n\n## Demo\n\n- [x] [angular4 demo with ng-cli](https://github.com/BioPhoton/angular-formatter-parser/tree/master/examples/angular4)\n- [x] [plunkr demo](https://embed.plnkr.co/7xFXTccR1hfLGbPBTjai/)\n\n\n![Angular-Formatter-Psrser](https://raw.githubusercontent.com/BioPhoton/angular-formatter-parser/master/resources/demo.gif)\n\n## Quick code example\n\n``` html\n// app.component.html\n\u003cinput type=\"text\" [formatterParser]=\"{formatterParser:[{ name: 'toCapitalized' }]}\"\u003e\n\n```\n\n\n## Basic Usage:\n\n#### Implement Library\n\n``` bash\n$ npm install angular-formatter-parser --save\n```\n\n``` typescript\n// app.module.ts\n...\n// IMPORT YOUR LIBRARY\nimport { FormatterParserModule } from 'angular-formatter-parser';\n\n@NgModule({\n  imports: [\n    ...\n    FormatterParserModule.forRoot()\n  ]\n  ...\n})\nexport class AppModule { }\n\n```\n\n\n#### Create formatterParser config object\n\n``` typescript\n// app.component.ts\n...\nimport { IFormatterParserConfig } from 'angular-formatter-parser/struct/formatter-parser-config';\n\n@Component({\n  selector: 'app-basic-usage',\n  templateUrl: './basic-usage.component.html',\n  styleUrls: ['./basic-usage.component.scss']\n})\nexport class BasicUsageComponent {\n\n  fPConfig: IFormatterParserConfig = {\n    formatterParser:[\n     { name: 'toCapitalized' }\n    ]\n  }\n\n  constructor() { }\n\n}\n\n```\n\n\n#### Use directive with config object\n\n``` html\n// app.component.html\n\u003cinput type=\"text\" [formatterParser]=\"fPConfig\"\u003e\n\n```\n\n\n## Usage with Reactive Forms\n\n#### Create FormGroup\n\n``` typescript\n// app.component.ts\n\n...\nexport class BasicUsageComponent {\n\n  fPConfig: IFormatterParserConfig = {\n    ...\n  }\n\n  formGroup: FormGroup;\n\n  constructor(private fb: FormBuilder) {\n    this.basicFormGroup = this.fb.group({ name: [] });\n  }\n\n}\n```\n\n\n#### Set formGroup and formControlName\n\n``` html\n// app.component.html\n\u003cform [formGroup]=\"formGroup\"\u003e\n  \u003cinput type=\"text\" formControlName=\"name\" [formatterParser]=\"fPConfig\"\u003e\n  {{formGroup.get('name').value}}\n\u003c/form\u003e\n```\n\n\n#### Specify the target (transform the value of the view or the model)\n\n``` typescript\n// app.component.ts\n...\nexport class BasicUsageComponent {\n\n  fPConfig: IFormatterParserConfig = {\n    formatterParser:[\n     //0 for view, 1 for model, 2 or nothing for both\n     { name: 'toCapitalized', target: 0  }\n    ]\n  }\n\n}\n\n```\n\n\n#### Use multiple transform functions\n\n``` typescript\n// app.component.ts\n...\n  fPConfig: IFormatterParserConfig = {\n    formatterParser:[\n     { name: 'toCapitalized', target: 0},\n     { name: 'replaceString',  params: [/ /g, ''], target: 1 }\n    ]\n  }\n...\n```\n\n## Use custom transform function\n\n#### Create custom function\n\n``` typescript\n//add-questionmark-transform.ts\nimport { IFormatterParserFn } from 'angular-formatter-parser/struct/formatter-parser-function';\n\nexport function addQuestionmark(value:any): IFormatterParserResult {\n    const transformadValue = value;\n    const result:IFormatterParserResult = {\n      name: \"addQuestionmark\",\n      result : transformadValue+'?',\n      previous: value\n    };\n\n    return result;\n}\n\n```\n\n#### Provide the function over the FORMATTER_PARSER token\n\n``` typescript\n// app.module.ts\n\n...\n// IMPORT FORMATTER_PARSER\nimport { FORMATTER_PARSER, FormatterParserModule } from 'angular-formatter-parser';\n...\n\n@NgModule({\n  ...\n  providers: [\n    { provide: FORMATTER_PARSER, useValue: addQuestionmark, multi: true }\n  ]\n  ...\n})\nexport class AppModule {\n\n}\n\n```\n\n#### Use custom transform function in config object\n\n``` typescript\n// app.component.ts\n...\nexport class BasicUsageComponent {\n\n  fPConfig: IFormatterParserConfig = {\n    formatterParser:[\n     { name: 'addQuestionMark' }\n    ]\n  }\n\n}\n\n```\n\n# Built in transform functions\n\n\n# What it is\nThe angular FormatterParser library in a port of the Angular 1.x `ngModel.$formatter` and `ngModel.$parser` implementation.\n\nIt is implemented as an configurable directive which mimics the angular reactive-forms validation.\n\nLike the `Validators` service provides a set default validation functions there is a `FormatterParser` service that provides a set of default transform functions.\n\nWhen you custom a custom validator you implement the `ValidatorFn` on your custom validation function.\nThen you implement `ControlValueAccessor` and use the `NG_VALIDATORS` token to hook into the validation section and provide your custom function as a validator.\n\nSame with transform functions with a little more options. As you know in angular1 we have `$parser` and `$formatter`.\n`$parser`, the array of transform functions that are called when the model changes and updates the `HtmlInputElement` value.\nAnd `$formatter`, the array of transform functions that are called when the `HtmlInputElement` fires it's input event with changes and updates the model.\n\nWe hook into the two directions by using the `ControlValueAccessor` for the `$formatter` direction, and the `@HostListener('input')` to hook into the `$parser` direction.\n\nTo register our transform functions we use the `FORMATTER_PARSER` token to provide our functions\n\nTo apply validators to a `FormControl` you setup an array of validator functions, default or custom and provide it under the validators key in the `FormControl` constructor parmas.\n\nTo apply transform functions to a `FormControl` use use the `formatterParser` directive which also binds a config array.\nBut instead of providing an array of validator functions use just provide an array of strings that are the name of the transform functions. the directive automatically recogizes the strings and finds the related transform function.\nYour custom transform functions can be registered under `FORMATTER_PARSER`, similar as you would with `NG_VALIDATORS`.\n\n\n# License\n\nMIT © [Michael Hladky](mailto:michael@hladky.at)\n\nCopyright 2017 [Michael Hladky](mailto:michael@hladky.at). All Rights Reserved.\nUse of this source code is governed by an MIT-style license that\ncan be found in the LICENSE file at [angular-formatter-parser](https://github.com/BioPhoton/angular-formatter-parser/blob/master/LICENSE.txt)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular-formatter-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiophoton%2Fangular-formatter-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular-formatter-parser/lists"}