{"id":17056293,"url":"https://github.com/biophoton/angular-alternative-validation","last_synced_at":"2026-04-06T04:06:49.385Z","repository":{"id":57177971,"uuid":"97651533","full_name":"BioPhoton/angular-alternative-validation","owner":"BioPhoton","description":"Provides an alternative validation state without effecting the valid state of a control","archived":false,"fork":false,"pushed_at":"2018-07-25T12:45:27.000Z","size":5137,"stargazers_count":25,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-15T14:35:31.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-18T23:08:38.000Z","updated_at":"2023-11-06T05:56:29.000Z","dependencies_parsed_at":"2022-09-14T02:01:10.297Z","dependency_job_id":null,"html_url":"https://github.com/BioPhoton/angular-alternative-validation","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-alternative-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-alternative-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-alternative-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular-alternative-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioPhoton","download_url":"https://codeload.github.com/BioPhoton/angular-alternative-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245149224,"owners_count":20568851,"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":[],"created_at":"2024-10-14T10:23:58.513Z","updated_at":"2026-04-06T04:06:49.342Z","avatar_url":"https://github.com/BioPhoton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-alternative-validation\n\n#### Angular Alternative Validation - The smoothest way to implement validation hints/warnings for your forms\n\n![License](https://img.shields.io/npm/l/angular-alternative-validation.svg)\n[![NPM Version](https://img.shields.io/npm/v/angular-alternative-validation.svg)](https://www.npmjs.com/package/angular-alternative-validation)\n[![Build Status](https://travis-ci.org/BioPhoton/angular-alternative-validation.svg?branch=master)](https://travis-ci.org/BioPhoton/angular-alternative-validation)\n[![Coverage Status](https://coveralls.io/repos/github/BioPhoton/angular-alternative-validation/badge.svg?branch=master)](https://coveralls.io/github/BioPhoton/angular-alternative-validation?branch=master)\n\n## Demo\n\n- [x] [angular4 demo with ng-cli](https://github.com/BioPhoton/angular-alternative-validation/tree/master/examples/angular4)  \n- [x] [plunkr demo](https://embed.plnkr.co/e3GOAFENPumfy78IWXAw/)\n\n\n![Angular-Alternative-Validation](https://raw.githubusercontent.com/BioPhoton/angular-alternative-validation/master/resources/demo.gif)\n\n## Quick code example:\n``` typescript\n// app.component.ts\n...\nimport { IAlternativeValidationConfig } from 'angular-alternative-validation/struct/alternative-validation-config';\n\n@Component({\n  selector: 'app-basic-usage',\n  template: `\u003cinput type=\"text\"\n                    formControlName=\"name\" \n                    [alternativeValidation]=\"{validator: ['required']}\"\n                    #aV=\"alternativeValidation\"\u003e\n                    \n              {{fg.get('name').valid}} vs {{aV.valid}}`\n})\nexport class BasicUsageComponent {\n...\n}\n\n```\n\n\n## Basic Usage:\n\n#### Implement Library\n\n``` bash\n$ npm install angular-alternative-validation --save\n```\n\n``` typescript\n// app.module.ts\n...\n// IMPORT YOUR LIBRARY\nimport { AlternativeValidationModule } from 'angular-alternative-validation';\n\n@NgModule({\n  imports: [\n    ...\n    AlternativeValidationModule.forRoot();\n  ]\n  ...\n})\nexport class AppModule { }\n\n```\n\n#### Create alternative validation config object\n\n``` typescript\n// app.component.ts\n...\nimport { IAlternativeValidationConfig } from 'angular-alternative-validation/struct/alternative-validation-config';\n\n@Component({\n  selector: 'app-basic-usage',\n  template: `\n  \u003cform [formGroup]=\"formGroup\"\u003e\n    \u003cinput type=\"text\" formControlName=\"name\" [alternativeValidation]=\"aVConfig\"\u003e\n    Value: {{formGroup.get('name').value}} , Valid: {{formGroup.get('name').valid}}\n  \u003c/form\u003e\n  `\n})\nexport class BasicUsageComponent {\n\n  aVConfig: IAlternativeValidationConfig = {\n     validator: [ \n      {name: 'required'},\n      {name: 'minLength', params: [3] }\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#### Template reference to the directive\n\n``` html\n// app.component.html\n... \n  \u003cinput type=\"text\" formControlName=\"name\" [alternativeValidation]=\"aVConfig\" #aV=\"alternativeValidation\"\u003e\n  {{aV.errors | json}} {{aV.valid}}\n```\n\n#### A Reference to the directive in the class\n\n``` typescript\n// app.component.ts\n... \n@ViewChild(AlternativeValidationDirective)\nalternativeValidationRef\n...\nngAfterViewInit() {\n    console.log('Directive referenc: ', this.alternativeValidationRef);\n  }\n...\n```\n\n## Use custom validations\n\n#### Create custom function\n\n``` typescript\n// app.module.ts\nexport function myValidation(param1, param2): ValidatorFn {\n   \n}\n\n...\n@NgModule({\n  ...\n  providers: [\n    { provide: NG_VALIDATORS, useValue: myValidation, 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: IAlternativeValidationConfig = {\n    alternativeValidation:[\n     { name: 'myValidation', params: [param1, param2] }\n    ]\n  }\n\n}\n\n```\n\n# What it is\n\nThere are many ways to build a alternative validation state.  \nMany of them can't reuse existing validators and all of them do not provide a separate state of validation.  \n\nWhat this library do is it provides an alternative state of the host control.  \nYou can use it like the normal form control validation  \nbut it is not effecting the actual validation of the form.  \n\nIt's a mix of `FormControlName`, `AbstractControlDirective`, `ControlValueAccessor`, `NG_VALIDATORS` and a little bit of `magic-glue$`.\n\nIn this way you can:   \n- reuse default validators and async validators\n- treat the alternative control stated independent from the real one that effects formGroup and formControl states\n- display user hints/information separated from the error messages\n- use other libraries working with formControl logic\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-alternative-validation](https://github.com/BioPhoton/angular-alternative-validation/blob/master/LICENSE.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular-alternative-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiophoton%2Fangular-alternative-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular-alternative-validation/lists"}