dtrelogan/react-formstate

Nested Array of Form

abelkbil opened this issue · 1 comments

abelkbil commented

@dtrelogan Thanks for such a nice library.

I was looking through the documentation and closed issues list for a example of nested form.
If time permits please add an example.

class DemoState {
    form = new FormState({
        name: new FieldState('My dashboard'),
        description:  new FieldState('My dashboard'),
        timeSync: new FormState({
            type: new FieldState(''),
            relative: new FormState({
                time: new FieldState(''),
                timeUnit: new FieldState(''),
            }),
            fixed: new FormState({
                startTime: new FieldState(''),
                endTime: new FieldState(''),
            })
        })
    });
}

class Demo extends React.Component<Props, State> {
    configForm: DemoState;

    render() {
        const data = this.configForm;
        return (
        <div id="dashboardConfig">
            <form onSubmit={data.onSubmit}>
            <div className="form-group">
                <label>Name:</label> 
                <input
                    className="form-control"
                    type="text"
                    value={data.name.value}
                    onChange={(e) => data.name.onChange(e.target.value)}
                />
                <p>{data.name.error}</p>
            </div>
            <div className="form-group">
                <label>Description:</label> 
                <textarea
                    className="form-control"
                    value={data.description.value}
                    onChange={(e) => data.description.onChange(e.target.value)}
                />
            </div>
            <button type="submit">Submit</button>
            <p>{data.form.error}</p>
            </form>
        </div>
        );
    }
}