useFormFields

useFormFields is very helpful hook to build forms, validate and retrive form data.

Built-in validators:

1. Validators.required
2. Validators.min
3. Validators.max
4. Validators.pattern

example:

import { Component, html, useFormFields, Form, Validators } from '@plumejs/core';
import { IMultiSelectOptions, registerMultiSelectComponent } from '@plumejs/ui';

// call in root component only.
registerMultiSelectComponent();

interface IFormFields {
  email: string;
  checkme: boolean;
  option: string;
  options: string[];
  gender: string
}

@Component(...)
class SampleForm {
  sampleform: Form<IFormFields>;
	createChangeHandler: any;
	multiSelectChangehandler: any;
  multiSelectOptions: IMultiSelectOptions = {
		data: ['option1', 'option2', 'option3', 'option4'],
		multiple: true,
		onchange: (optionsArr: string[]) => {
			this.multiSelectChangehandler({
				target: {
					value: optionsArr
				}
			});
		},
		buttonText: (options:Array<string>) => {
			if (options.length === 0) {
				return 'None selected';
			}
			else if (options.length > 3) {
				return options.length + ' selected';
			} else {
				return options.join(', ');
			}
		},
	}

  constructor() {
    [ this.sampleform, this.createChangeHandler ] = useFormFields<IFormFields>({
			email: ["", Validators.required, Validators.pattern(/^[a-z0-9]((\.|\+)?[a-z0-9]){5,}@gmail\.com$/)],
			checkme: false,
			option: '',
			options: [],
			gender: "",
		});
		this.multiSelectChangehandler = this.createChangeHandler('options');
		this.submitForm = this.submitForm.bind(this);
  }

  submitForm(e: Event) {
		e.preventDefault();
		console.log(this.sampleform);
	}

  reset() {
    this.sampleForm.reset();
  }

  render() {
    return html`
      <form onsubmit=${this.submitForm}>
        <div>
          <label>textbox</label>
          <input onchange=${this.createChangeHandler("email")}/>
        </div>
        <div>
          <b>radio</b>
          <input
							type="radio"
							id="gender_male"
							name="gender"
							value="male"
							onchange=${this.createChangeHandler("gender")}
						/>
						<label for="gender_male">Male</label>
						<input
							type="radio"
							id="gender_female"
							name="gender"
							value="female"
							onchange=${this.createChangeHandler("gender")}
						/>
						<label for="gender_female">Female</label>
        <div>
        <div>
          <label>checkbox</label>
          <input
							type="checkbox"
							name="gender"
							value="male"
							onchange=${this.createChangeHandler("checkme")}
						/>
        <div>
        <div>
          <label>single select</label>
          <select value=${this.sampleform.get('option').value} onchange=${this.createChangeHandler("option")}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        <div>
        <div>
          <label>multi select</label>
          <select multiple value=${this.sampleform.get('options').value} onchange=${this.createChangeHandler("options")}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        <div>
        <div>
          <label>plumeui component multi select</label>
          <multi-select multiSelectOptions=${ this.multiSelectOptions }></multi-select>
        <div>
        <button onclick=${() => this.reset()}>Reset</button>
        <button type="submit" class="button is-info">Submit</button>
      </form>
    `
  }
}