Deal With FormBuilder

Let's take this form for the exemple :

import LangManager from "../utils/LangManager";
import Forms from "../Plasma/Forms/Forms";
import FormType from "../Plasma/Forms/FormType";

export default class UserEditForm extends Forms {

    constructor(formId, data) {
        super(formId, data);
    }

    build() {
        this.add("password", FormType.type.PASSWORD, {
            label: LangManager.getLang().NEW_PASSWORD,
            required: false,
            mapped: false

        })
        this.add("forcePass", FormType.type.CHECKED, {
            label: LangManager.getLang().FORCE_PASS,
            required: false
        })
        this.add("isAdmin", FormType.type.CHECKED, {
            label: LangManager.getLang().IS_ADMIN,
            required: false
        })
    }
}

This form have 3 inputs : password (required and mapped false) ; forcePass (checkbox) required false; isAdmin (checkbox required false) As you can see you have a label "mapped" on password. First take a look at the constructor, you need to pass a formId AND data. Datas are jsObject type to prefill form. Explaination: in this case this is a form to edit an user, so we want major information prefilled this is why we need to pass data to the form builder. data look like this

let userData = {
    userName: "toto",
    forcePass: true,
    isAdmin: false
}

You can see that userName is not present on the inputs, this is not important, only data with a key matching input name are handle. That mean forcePass will be checked by default when form will be loaded. To prevent handling data, you have to add mapped: false on input's label (as for password)

Creating the form inside Component

first you need to create the form

let form = new UserEditForm("editUser", userData )

Now you can tell form to handle a method (for validation)

form.handle(this.myFormSubmissionMethod)

Warning don't add () on your handle otherwise it's gonna call the method now.

The handle method

Your handle method should have two parameter event, form

Event is the submit event, and form the form created by the plasma form's builder

editUser(event, form){
    if(form.validateForm()){
        let password = form.getData("password")
        let forcePass = form.getData("forcePass")
        let isAdmin = form.getData("isAdmin")
        
        //do your stuff here
        
    }else{
    //required input are missing
    }
}

As you can see we call 2 methods from "form" : validateForm() and getData()

The validateForm method is a boolean who gonna check if all input with label "required" are filled. This method will also gonna generate form data.

The getData() method will return the value of the input using input name as parameter.

WARNING

You'll not be able to use getData if validateForm is not called before.

Render your form

First of all you have to pass your form to twig parameter :

this.setData({ form: form}) // before calling template

Then inside your twig file you can do that :

{{ form.form_start() }}
    <div class="card-body">
        {{ form.fill() }}
    </div>
    <div class="card-footer text-center">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-user-edit"></i> edit
        </button>
    </div>
{{ form.form_end() }}

to start your form use {{ form.form_start() }} to draw all of your form use {{ form.fill() }} the draw is defined by the class form order. to end your form use {{ form.form_ed() }}

Tips

For drawing a specific input you can use this : form.draw("inputName")

Limitations:

If you use draw for an input, you have to do it for every other input in the form. Otherwise fill() will generate an other input

Dynamic Select / multiple options

If you wish to add dynamic options to your select or multiple inputs first add one more param to your Form Constructor :

constructor(formId, data, customChoices) {
    super(formId, data, customChoices);
}

customChoices must be jsObject like this :

let customChoices = {
    customChoice1: {
        value1: "option1",
        value2: "option2",
    }
}

The customChoices must be passed when you create your form :

let form = new UserEditForm("editUser", userData, customChoices )

Then inside your Form builder input add this :

this.add("mySelect", FormType.type.SELECT,{
  choices: this.customChoices.customChoice1,
})