Smart Forms

pub points pub points pub points

The idea behind this package is a easy way to build and validate a form with especific field types.

Examples

Features

Field Types

You have an ENUM which contains the available field types (I will add more progressively). The supported types are:

  • Text
  • Multiline
  • Number
  • Phone
  • E-Mail
  • URL
  • Dropdown
  • DatePicker

Input Actions

You can handle the action to show on the key enter of the keyboard for each field. By now are supported only 3 actions:

  • Next
  • Done
  • Auto (If you use this the plugin will decide considering if this is the last field or not);

Buttons

In this plugin you can add two buttons that only require the label to show and will be rendered.

  • Submit Button
  • Reset Button

Now you can use your custom button and access to the state of the form including the validateForm, resetForm and the responseToMap methods.

How it works

You need to generate to types of entitys.

  1. Field Model

    This one contains all the parameters and settings that are available (by now) for the fields of the form. These are:

    • label: String (mandatory)
    • type (Use the enum Types)
    • errorMessage: String
    • mandatory: boolean
    • actions (Use the enum Actions)
    • hint: String
    • validate: boolean
    • maxLength: int
    • password: boolean
    • readOnly: boolean
    • maxLength: int
    • maxLengthMessage: String
    • minLength: int
    • minLengthMessage: String
    • options: List < FieldOptionsmodel >
    • dateTimeFormat: String - Intl format
  2. Form Model

    This is the base of the plugin and contain just a little variables:

    • key: GlobalKey<'SmartFormState'>
    • name: String (mandatory)
    • submitButton: String
    • resetButton: String
    • callBack
    • fields: List of entitys of Field Model (mandatory)

Return Statement

At the submit of the form you will get a return like this:

{
    "form": "<name of the form submitted>",
    "values": {
        "<field label>": "<value obtained>"
    }
}