needy-element
v1.0.4
Published
An angular directive to shake a form field when it is invalid (needs attention).
Downloads
1
Maintainers
Readme
NeedyElement
An angular directive to shake a form field when it is invalid (needs attention).
This library was generated with Angular CLI version 15.0.0.
Installation :wrench:
npm install needy-element
:warning: Note: Please don't forget to import the module NeedyElementModule
, in the appropriate module when using in an Angular project.
Usage :woman_mechanic:
This directive was designed to be applied on a Mat-Form-Field in a Reactive form, and the prerequisites are:
- a form group
- form controls
- control validation to trigger the directive
By default, the directive will shake an element when it has the "mat-form-field-invalid" class, but you can specify a different class to trigger the directive, when using it with other elements other than the mat-form-field.
Using on a mat-form-field (trigger when the field is invalid)
<div>
<mat-form-field needy>
<input matInput id="someId"
formControlName="someFormControl" required>
</mat-form-field>
</div>
Using on a custom element (trigger when the specified class is added to the element)
<div>
<input id="someElement" [needy]="trigger-class"/>
</div>
:warning: Note: The directive will trigger (shake the element) when the class is detected on the element, when adding it using the method below or some other method:
document.getElementById('someElement').classList.add('trigger-class');
Examples :desktop_computer:
If you need more detailed examples, please visit: https://stackblitz.com/edit/stackblitz-starters-wvqznt?file=src%2Fapp%2Fapp.component.ts