{"id":16595956,"url":"https://github.com/arslanameer/mark-invalid-form-controls","last_synced_at":"2025-10-29T12:30:40.942Z","repository":{"id":153900363,"uuid":"629673977","full_name":"ArslanAmeer/mark-invalid-form-controls","owner":"ArslanAmeer","description":"The markInvalidFormControls function is a utility function for Angular applications that helps you mark all invalid form controls as dirty and scrolls smoothly to the first invalid control. This utility is useful for providing better user experience in forms with validation, making it easier for users to identify and correct the invalid inputs.","archived":false,"fork":false,"pushed_at":"2023-05-13T23:24:50.000Z","size":32,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-09T10:47:12.612Z","etag":null,"topics":["angular","angular-reactive-forms","arslan-ameer","arslanameer","mark-invalid-form-controls"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mark-invalid-form-controls","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/ArslanAmeer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-18T19:48:44.000Z","updated_at":"2024-09-06T17:56:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c191be2-5515-4163-b816-3dfb75e4d9d0","html_url":"https://github.com/ArslanAmeer/mark-invalid-form-controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArslanAmeer%2Fmark-invalid-form-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArslanAmeer%2Fmark-invalid-form-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArslanAmeer%2Fmark-invalid-form-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArslanAmeer%2Fmark-invalid-form-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArslanAmeer","download_url":"https://codeload.github.com/ArslanAmeer/mark-invalid-form-controls/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857757,"owners_count":16556056,"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-reactive-forms","arslan-ameer","arslanameer","mark-invalid-form-controls"],"created_at":"2024-10-11T23:51:57.973Z","updated_at":"2025-10-29T12:30:40.635Z","avatar_url":"https://github.com/ArslanAmeer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" float=\"left\"\u003e\n     \u003cimg src=\"./angular-reactive-forms.png\" alt=\"angular-reactive-form\" width=\"80\"\u003e\n\u003c/p\u003e\n\n# Angular Mark Invalid Form Controls Utility\n\nThe markInvalidFormControls function is a utility function for Angular applications to be used with Reactive Forms that helps you mark all invalid form controls as dirty and scrolls smoothly to the first invalid control. This utility is useful for providing better user experience in forms with validation, making it easier for users to identify and correct the invalid inputs.\n\n## Why use this utility?\n\nWhen working with Angular forms, you might have scenarios where a user submits a form without filling in all required fields or providing invalid data. In such cases, it is essential to inform the user about these errors and guide them to correct the inputs. The markInvalidFormControls utility function helps you achieve this by marking all invalid controls as dirty and scrolling to the first invalid control on the form.\n\n## When to use it?\n\nYou should use this utility function when you have a form with validation, and you want to provide a better user experience by guiding the user to the first invalid input when the form is submitted with invalid data.\n\n## How to use it?\n\n1. Install the package using npm:\n\n    ```npm install mark-invalid-form-controls```\n\n2. Import the markInvalidFormControls function in your component:\n    \n    ```typescript \n    import { markInvalidFormControls } from 'mark-invalid-form-controls';\n    ```\n3. Use the markInvalidFormControls function in your component, typically in the submit event handler:\n\n    ```typescript\n    onSubmit() {\n        if (this.myForm.invalid) {\n            markInvalidFormControls(this.myForm, this.el);\n        } else {\n            // Handle successful form submission\n        }\n    }\n    ```\n4. Pass the ElementRef instance of the component as the second parameter to the function. You can get the ElementRef by injecting it into your component's constructor:\n\n    ```typescript\n    constructor(private el: ElementRef) {}\n    ```\n    Then pass this.el as the second parameter when calling the markInvalidFormControls function:\n\n    ```typescript\n    markInvalidFormControls(this.myForm, this.el);\n    ```\n\n## Dependencies\n\nTo use this utility function, you must have the following dependencies installed in your Angular project:\n\n    @angular/core: This is a core dependency of any Angular application.\n    @angular/forms: This is required to work with Angular forms.\n\nThe utility function relies on the AbstractControl, FormArray, FormControl, and FormGroup classes from the @angular/forms package, and the ElementRef class from the @angular/core package.\n\n## Function signature\n- `control`: An AbstractControl instance representing the form control, form group, or form array you want to mark as dirty.\n\n- `elRef`: An ElementRef instance representing the component where the form resides. This parameter is required for scrolling to the first invalid control.\n\n\n## License\n\nThis project is licensed under the MIT License. For more information, please see the [LICENSE](LICENSE) file.\n\n## Author\n\n- [Arslan Ameer](https://github.com/arslanameer) - Initial work\n\n## Contributing\n\nContributions are welcome! If you find a bug or would like to request a new feature, please feel free to open an issue or submit a pull request on the project's GitHub repository.\n\nTo contribute:\n\n1. Fork the repository on GitHub.\n2. Clone your fork and create a new branch for your feature or bugfix.\n3. Commit your changes, and push the branch to your fork.\n4. Create a pull request from your fork to the original repository.\n\nPlease make sure to follow the project's coding style and include tests and documentation for any new features or bugfixes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farslanameer%2Fmark-invalid-form-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farslanameer%2Fmark-invalid-form-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farslanameer%2Fmark-invalid-form-controls/lists"}