logo polydile dile-components

DileFormMixin

Mixins to apply more functionality to forms in order to generate some automatisms and avoid to duplicate code when you use forms in your applications.

Installation

npm i @dile/dile-form-mixin

Usage

To use DileFormMixin you only need to extend your custom element class with the mixin.

import { DileFormMixin } from '@dile/dile-form-mixin';

class MyElement extends DileFormMixin(HTMLElement) {
  // your custom element code...
}

Requirements

This mixin apply some methods to the components to recognize and operate whith forms. To be recognized the form elements should have:

It works with native form elements or custom elements, as long as they have the value and name property.

Methods

showErrors({
  name: 'Please complete your name', 
  age: 'your age should be greater than 18 years old'
})

In the above code "name" and "age" are the name of the form element that shoud have a displayed error.

There is another requirement to display the error on the component.