Form basics

Form basics

Frui.ts provides multiple packages which together makes process of form creation and validation easier for you.

Let´s start with introducing main concepts.

Model

If you came from another FE framework or library, you're probably starting to create forms from View. In Frui.ts we are typically working from the opposite site.

We firstly define data structure where we want to store data.

Example

import { observable } from "mobx";

export default class Person {
    @observable 
    name: string;
    
    @observable
    surname: string;
    
    @observable
    email: string;
}

We just create entity which define our data structure, which we need to be filled in a form.

As you can see we´re using @observable decorator from Mobx for each property. It's mandatory to work others components correctly.

ViewModel

After creation of data structure, we create ViewModel which handle form sumbition, validation and other business logic.

Example

import { bound } from "@frui.ts/helpers";
import Person from "entities/person";

class FormViewModel extends ScreenBase {
    item: Person = new Person();
    
    @bound
    onSubmit() {
        console.log(this.item);
    }
} 

View

Finally we can create render component for our form.

Form controls

Form is composed with different kind of user inputs. In apps powered by Frui.ts these inputs are represented by two-way binding components which we usually called controls.

You can use our´s pre-build HTML controls

If you are familiar with Bootstrap you can use implemention of Bootstrap controls

Or you can write your own

Example view

import { TextBox } from "@frui.ts/htmlcontrols";
import { preventDefault } from "@frui.ts/helpers";

const FormView: ViewComponent<FormViewModel> = observer(({ vm }) => (
    <form onSubmit={preventDefault(vm.onSubmit)}>
        <label for="name">Name</label>
        <Textbox target={vm.item} property="name" />
        
        <label for="name">Surname</label>
        <Textbox target={vm.item} property="surname" />

        <label for="name">E-mail</label>
        <Textbox target={vm.item} property="email" type="email" />
        
        <button type="submit">Submit</button>
    </form>    
));

registerView(FormView, FormViewModel);