https://github.com/ismaestro/ngx-scroll-to-first-invalid
Directive to scroll to first invalid form control inside an Angular form on submit
https://github.com/ismaestro/ngx-scroll-to-first-invalid
angular control directive first form invalid scroll submit
Last synced: 2 months ago
JSON representation
Directive to scroll to first invalid form control inside an Angular form on submit
- Host: GitHub
- URL: https://github.com/ismaestro/ngx-scroll-to-first-invalid
- Owner: Ismaestro
- License: mit
- Created: 2018-10-30T10:41:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-05T21:40:00.000Z (8 months ago)
- Last Synced: 2025-04-07T00:51:13.820Z (3 months ago)
- Topics: angular, control, directive, first, form, invalid, scroll, submit
- Language: HTML
- Homepage: https://ngx-scroll-to-first-invalid.netlify.app
- Size: 1.48 MB
- Stars: 30
- Watchers: 1
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
ngx-scroll-to-first-invalid
Angular directive to scroll to first invalid input inside a form.
LIVE DEMO
Report bug
·
Request feature
## Table of contents
- [Usage](#usage)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)
## Usage
```sh
npm i @ismaestro/ngx-scroll-to-first-invalid --save-dev
```
#### 1. Import the directive in your component:
```ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [NgxScrollToFirstInvalidDirective, ...],
changeDetection: ChangeDetectionStrategy.OnPush,
})
```
#### 2. Use the directive inside a form:
```html
```
Here you have an example of a form using ngx-scroll-to-first-invalid.
[DEMO](https://ngx-scroll-to-first-invalid.netlify.app)
It also works with nested forms, and recently added support for Angular Ionic.
## Bugs and feature requests
Have a bug or a feature request? Please first read the
[issue guidelines](https://github.com/Ismaestro/ngx-scroll-to-first-invalid/blob/master/CONTRIBUTING.md)
and search for existing and closed issues. If your problem or idea is not addressed yet,
[please open a new issue](https://github.com/Ismaestro/ngx-scroll-to-first-invalid/issues/new).
## Creators
**Ismael Ramos**
-
## Copyright and license
Code released under the
[MIT License](https://github.com/Ismaestro/ngx-scroll-to-first-invalid/blob/master/LICENSE).
Enjoy :metal: