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 🔧

npm install needy-element

⚠️ Note: Please don't forget to import the module NeedyElementModule, in the appropriate module when using in an Angular project.

Usage 👩‍🔧

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>

⚠️ 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 🖥️

If you need more detailed examples, please visit: https://stackblitz.com/edit/stackblitz-starters-wvqznt?file=src%2Fapp%2Fapp.component.ts