All Projects → Ismaestro → ngx-scroll-to-first-invalid

Ismaestro / ngx-scroll-to-first-invalid

Licence: MIT license
Directive to scroll to first invalid form control inside an Angular form on submit

Programming Languages

typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to ngx-scroll-to-first-invalid

Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+2307.41%)
Mutual labels:  scroll, directive
Angular Contenteditable Accessor
This accessor allows you to use Angular forms with contenteditable elements with ease. It has zero dependencies, other than Angular itself as peer and works with Angular 4+ in all modern browsers, including Internet Explorer 11
Stars: ✭ 34 (+25.93%)
Mutual labels:  control, form
Ngx Infinite Scroll
Infinite Scroll Directive for Angular
Stars: ✭ 1,024 (+3692.59%)
Mutual labels:  scroll, directive
file-input-accessor
Angular directive that provides file input functionality in Angular forms.
Stars: ✭ 32 (+18.52%)
Mutual labels:  control, form
Vue Scroll
Scroll directive on vue
Stars: ✭ 238 (+781.48%)
Mutual labels:  scroll, directive
cypress-upload-file-post-form
Solution for two Cypress testing use-cases I came across with: perform a direct http FORM request to the server containing a file and other parameters and upload a file into a form before submission
Stars: ✭ 59 (+118.52%)
Mutual labels:  form, submit
dom-locky
🙈🙉🙊 - the best way to scope a scroll, or literally any other event.
Stars: ✭ 18 (-33.33%)
Mutual labels:  scroll
react-form-base
Base React component for generic forms
Stars: ✭ 18 (-33.33%)
Mutual labels:  form
ngx-typed-forms
Extends Angular reactive forms strongly typed
Stars: ✭ 27 (+0%)
Mutual labels:  form
vue3-form-validation
Vue Composition Function for Form Validation
Stars: ✭ 18 (-33.33%)
Mutual labels:  form
react-native-validator-form
Simple validator for react-native forms.
Stars: ✭ 21 (-22.22%)
Mutual labels:  form
react-hubspot
A collection of React hooks for interacting with Hubspot APIs
Stars: ✭ 20 (-25.93%)
Mutual labels:  form
onion-form
React Redux form builder with great UX validations
Stars: ✭ 50 (+85.19%)
Mutual labels:  form
vue-use-form
✅ A Vue.js composition API function to validate forms
Stars: ✭ 97 (+259.26%)
Mutual labels:  form
foect
Simple form validation library for React Native.
Stars: ✭ 39 (+44.44%)
Mutual labels:  form
ng-mat-select-infinite-scroll
Infinite Scroll directive for angular material select component
Stars: ✭ 39 (+44.44%)
Mutual labels:  scroll
vue-visible
v-visible directive for VueJS
Stars: ✭ 31 (+14.81%)
Mutual labels:  directive
vue-next-level-scroll
Bring your scroll game to the next level!
Stars: ✭ 49 (+81.48%)
Mutual labels:  scroll
react-native-paper-form-builder
React Native Paper Form Builder with inbuilt Validation, dropdown, autocomplete, checkbox, switch and radio inputs.
Stars: ✭ 95 (+251.85%)
Mutual labels:  form
node-input-validator
Validation library for node.js
Stars: ✭ 74 (+174.07%)
Mutual labels:  form

@ngx-scroll-to-first-invalid

Angular directive to scroll to first invalid input inside a form on submit

LIVE DEMO
Demo example
Report bug · Request feature

Table of contents

Status

travis

Quick start

First you need to install the npm module:

npm i @ismaestro/ngx-scroll-to-first-invalid --save

1. Import the NgxScrollToFirstInvalidModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';

@NgModule({
    imports: [
        BrowserModule,
        NgxScrollToFirstInvalidModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the directive inside a form:

<form [formGroup]="testForm" ngxScrollToFirstInvalid>
  <input id="test-input1" type="text" formControlName="someText1">
  <button (click)="saveForm()"></button>
</form>

Here there is an example using ngx-scroll-to-first-invalid here

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Creators

Ismael Ramos

Buy Me a Coffee at ko-fi.com

Copyright and license

Code and documentation copyright 2011-2018 the authors. Code released under the MIT License.

Enjoy 🤘

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].