An angular directive to shake a form field when it is invalid (needs attention).

npm install needy-element

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

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.

<div>
   <mat-form-field needy>
      <input matInput id="someId" 
        formControlName="someFormControl" required>
   </mat-form-field>
</div>

<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');

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