Mobx react form add fields on click depending on condition

Question

I have a function that generates fields for a form like so:

export const makeFields: Function = (itemData: Object) => {
    return [
        {
        // PROJECT DETAIL SECTION
            name: 'chooseAccount',
            label: 'Choose Account',
            fields: [{
                name: 'account',
                label: 'Choose Trading Account',
                rules: 'required',
                ...(itemData ? { value: itemData.trading_account ? itemData.trading_account.name : null } : null)
            }]
        },
        {
            name: 'projectDetails',
            label: 'Project detail',
            fields: [
                {
                    name: 'projectCode',
                    label: 'Project code',
                    rules: 'required',
                    ...(itemData ? { value: itemData.code } : null)
                },
...

and the component that uses this function for the form fields:

...
export default class ProjectForm extends React.Component<*> {

    props: TypeProps;

    getMode = () => this.props.mode

    componentDidMount() {
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.getMode() === 'edit'
            ?
            projectDetailsStore.loadProjectDetails(this.props.projectId)
            :
            projectDetailsStore.resetStore();
    }

    @computed get form(): Object {
        const itemData: Object = (typeof this.props.itemData === 'undefined') ? {} : this.props.itemData;
        const fields: Array<*> = makeFields(this.props.projectDetailsStore.details);

        return this.getMode() === 'edit'
            ? projectEdit(fields, itemData)
            : projectCreate(fields);
    }

    render(): React.Element<*> {
        const t: Function = this.props.t;
        const TAmodel: AutoCompleteData = new AutoCompleteData(autoCompleteTradingAccounts);
        const Pmodel: AutoCompleteData = new AutoCompleteData(autoCompleteProject);
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.form.add(
            {
                name: 'test'
            }
    )

        console.log(this.form)
        return (
            <PageWrapper>
                {projectDetailsStore.loadingProjectDetails
                    ?
                        <Loader />
                    :
                        <FormWrapper form={this.form}>
                            <form>
                                <FormSection form={this.form} section="chooseAccount">
                                    <InputLabel htmlFor="account">
                                        {t('projectForm: Choose trading account')}
                                    </InputLabel>
                                    <ElectroTextField field={this.form.$('chooseAccount.account')} />
                                    {/* <ElectroAutoComplete
                                        field={this.form.$('chooseAccount.account')}
                                        form={this.form}
                                        props={{
                                            model: TAmodel
                                        }}
                                    /> */}
                                </FormSection>
                                <FormSection form={this.form} section="projectDetails">
                                    <ElectroTextField field={this.form.$('projectDetails.projectCode')} />
                                    <ElectroTextField field={this.form.$('projectDetails.projectName')} />
...

I would like to add some fields to the form based on a condition. I have tried the following:

    this.form.add(
        {
            name: 'test'
        }
    )

it doesn't throw an error but nothing happens.

The add method takes an object as per the docs (https://foxhound87.github.io/mobx-react-form/docs/api-reference/fields-methods.html). Ideally I would like a click event to fire the add method and add the newly created field.

score 0 · Answer 1 · answered Jul 31 '18 at 08:55

this.form is neither a React state nor a MobX observable, so that nothing happens when you change its value.

To get it to work, you should create an observable form field that is initialized by makeFields, and use an action function to change its value, and then use observer to re-render.

If you are not quite familiar with mentioned above, read React & MobX official tutorials first.

Mobx react form add fields on click depending on condition

1 Answers1