How not to hate your life when dealing with forms

Video of the talk 👉 https://www.youtube.com/watch?v=kIi9OV338c4&list=PLOEJ0eNOcZeosJfuT0dRcRWvNz4pru7SD&index=7&t=0s

Code examples 👉 https://github.com/RStankov/talks-code/tree/master/2019.05.11%20-%20Forms%20with%20React%202

Transcript

1. How not to hate your life when dealing with forms Radoslav Stankov 11/05/2019
2. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov
5. 
 Who is developer worst enemy? ! 

6. " The designer 
 Who is developer worst enemy? ! 

7. " The designer # The QA 
 Who is developer worst enemy? ! 

8. " The designer # The QA $ The sys admin 
 Who is developer worst enemy? ! 

9. " The designer # The QA $ The sys admin % The project owner 
 Who is developer worst enemy? ! 

10. " The designer # The QA $ The sys admin % The project owner & Santa 
 Who is developer worst enemy? ! 

11. " The designer # The QA $ The sys admin % The project owner & Santa ' Forms 
 Who is developer worst enemy? ! 

12. " The designer # The QA $ The sys admin % The project owner & Santa ( Form 
 Who is developer worst enemy? ! 

15. Form Basics
19. <form> <h1>
 <label> <input /> </label>
 <input type="submit" /> </form>
20. function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { event.preventDefault(); console.log(state); }; return ( <form onSubmit={onSubmit}> <div> <label htmlFor="title">Title:</label> <input id="title" type="text" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value }) } /> </div> <input type="submit" value="Submit" /> </form> ); }
21. function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { event.preventDefault(); console.log(state); }; return ( <form onSubmit={onSubmit}> <div> <label htmlFor="title">Title:</label> <input id="title" type="text" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value }) } /> </div> <input type="submit" value="Submit" /> </form> ); }
22. Input change function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { event.preventDefault(); console.log(state); }; return ( <form onSubmit={onSubmit}> <div> <label htmlFor="title">Title:</label> <input id="title" type="text" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value }) } /> </div> <input type="submit" value="Submit" /> </form> ); }
23. Input change 
 onChange setState function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { event.preventDefault(); console.log(state); }; return ( <form onSubmit={onSubmit}> <div> <label htmlFor="title">Title:</label> <input id="title" type="text" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value }) } /> </div> <input type="submit" value="Submit" /> </form> ); }
24. Input change 
 onChange setState 
 render New value function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { event.preventDefault(); console.log(state); }; return ( <form onSubmit={onSubmit}> <div> <label htmlFor="title">Title:</label> <input id="title" type="text" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value }) } /> </div> <input type="submit" value="Submit" /> </form> ); }
26. Field Input Control Label
27. Field Input Control Label ? Error Description
28. <form> <h1>
 <label> <input /> </label>
 <input type="submit" /> </form>
29. <form> <h1>
 <Field />
 <input type="submit" /> </form>
30. function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { /* */ }; return ( <form onSubmit={onSubmit}> <Field id="title" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value })} /> <input type="submit" value="Submit" /> </form> ); } function Field({ label, name, ...inputProps }) { return ( <div> <label htmlFor={inputProps.id}>{label || capitalize(name)}:</label> <input type="text" name={name} {...inputProps} /> </div> ); }
31. function SubmitTalkForm() { const [state, setState] = useState({}); const onSubmit = event => { /* */ }; return ( <form onSubmit={onSubmit}> <Field id="title" name="title" value={state.title || ''} onChange={({ target }) => setState({ ...state, title: target.value })} /> <input type="submit" value="Submit" /> </form> ); } function Field({ label, name, ...inputProps }) { return ( <div> <label htmlFor={inputProps.id}>{label || capitalize(name)}:</label> <input type="text" name={name} {...inputProps} /> </div> ); }
32. 
 Form
33. 
 Form Some Component
34. 
 Form Some Component Some Other Component
35. 
 Form Some Component Some Other Component 
 Field
36. 
 Form Some Component Some Other Component 
 Field Context
37. 
 Form Some Component Some Other Component 
 Field Context Context
38. const FormContext = React.createContext(); function SubmitTalkForm() { const context = useState({}); const onSubmit = event => { /* */ }; return ( <FormContext.Provider value={context}> <form onSubmit={onSubmit}> <Field name="title" /> <input type="submit" value="submit" /> </form> </FormContext.Provider> ); } function Field({ label, name, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}: </label> <input type="text" id={name} name={name}
39. const FormContext = React.createContext(); function SubmitTalkForm() { const context = useState({}); const onSubmit = event => { /* */ }; return ( <FormContext.Provider value={context}> <form onSubmit={onSubmit}> <Field name="title" /> <input type="submit" value="submit" /> </form> </FormContext.Provider> ); } function Field({ label, name, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}: </label> <input type="text" id={name} name={name}
40. const FormContext = React.createContext(); function SubmitTalkForm() { const context = useState({}); const onSubmit = event => { /* */ }; return ( <FormContext.Provider value={context}> <form onSubmit={onSubmit}> <Field name="title" /> <input type="submit" value="submit" /> </form> </FormContext.Provider> ); } function Field({ label, name, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}: </label> <input type="text" id={name} name={name}
41. return ( <FormContext.Provider value={context}> <form onSubmit={onSubmit}> <Field name="title" /> <input type="submit" value="submit" /> </form> </FormContext.Provider> ); } function Field({ label, name, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}: </label> <input type="text" id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value })} {...inputProps} /> </div> ); }
42. <form> <h1>
 <Field />
 <input type="submit" /> </form>
43. <Form> <h1>
 <Form.Field />
 <Form.Submit /> </Form>
44. function SubmitTalkForm() { const onSubmit = values => { console.log(value); }; return ( <Form onSubmit={onSubmit}> <Form.Field name="title" /> <Form.Submit /> </Form> ); }
45. const FormContext = React.createContext([{}, function() {}]); function Form({ onSubmit, initialValues, ...props }) { const context = useState(initialValues); function handleSubmit(e) { e.preventDefault(); onSubmit(context[0]); } return ( <FormContext.Provider value={context}> <form onSubmit={handleSubmit} {...props} /> </FormContext.Provider> ); } Form.Field = Field; Form.Submit = () => <input type="submit" value="submit" />;
46. <Form> <h1>
 <Form.Field />
 <Form.Submit /> </Form>
47. <Form> <h1>
 <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
48. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Submit /> </Form>
49. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <input type="text" id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value }) } {...inputProps} /> </div> ); }
50. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <input type={control || 'text'} id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value }) } {...inputProps} /> </div> ); }
51. <Form> <h1>
 <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
52. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
53. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Submit /> </Form>
54. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <input type={control || 'text'} id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value }) } {...inputProps} /> </div> ); }
55. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); let Control = props => <input type={control || 'text'} {...props} />; if (control === 'textarea') { Control = props => <textarea {...props} />; } return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value })} {...inputProps} /> </div> ); }
56. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); let Control = props => <input type={control || 'text'} {...props} />; if (control === 'textarea') { Control = props => <textarea {...props} />; } return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value })} {...inputProps} /> </div> ); }
57. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
58. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
59. const LENGTH_OPTIONS = [ { value: 15, label: '15 minutes' }, { value: 30, label: '30 minutes' }, { value: 45, label: '45 minutes' }, ]; <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Submit /> </Form>
60. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); let Control = props => <input type={control || 'text'} {...props} />; if (control === 'textarea') { Control = props => <textarea {...props} />; } if (control === 'select') { Control = ({ options, ...props }) => ( <select {...props}> {options.map(({ label, value }, i) => ( <option key={i} value={value}> {label || value} </option> ))} </select> ); } return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name}
61. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); let Control = props => <input type={control || 'text'} {...props} />; if (control === 'textarea') { Control = props => <textarea {...props} />; } if (control === 'select') { Control = ({ options, ...props }) => ( <select {...props}> {options.map(({ label, value }, i) => ( <option key={i} value={value}> {label || value} </option> ))} </select> ); } return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name}
62. const CONTROLS = { undefined: props => <input type="text" {...props} />, text: props => <input type="text" {...props} />, email: props => <input type="email" {...props} />, textarea: props => <textarea {...props} />, select: ({ options, ...props }) => ( <select className="form-control" {...props}> {options.map(({ label, value }, i) => ( <option key={i} value={value}> {label || value} </option> ))} </select> ), };
 
 function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); const Control = CONTROLS[name]; return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name}
63. const CONTROLS = { undefined: props => <input type="text" {...props} />, text: props => <input type="text" {...props} />, email: props => <input type="email" {...props} />, textarea: props => <textarea {...props} />, select: ({ options, ...props }) => ( <select className="form-control" {...props}> {options.map(({ label, value }, i) => ( <option key={i} value={value}> {label || value} </option> ))} </select> ), };
 
 function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); const Control = CONTROLS[name]; return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name}
64. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Submit /> </Form>
65. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Field />
 <Form.Submit /> </Form>
66. const CONTROLS = { /* */ radioGroup: ({ value options, name, onChange, ...props }) => ( <ul> {options.map((option, value }, i) => ( <li key={i}> <label> <input type="radio" name={name} value={option.value} checked={option.value === value} onChange={onChange} {...props} /> {option.label || option.value} </label> </li> ))} </ul> ), };
67. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Field />
 <Form.Submit /> </Form>
68. <Form> <h1>
 <Form.Field /> <Form.Field /> <Form.Field /> <Form.Field />
 <Form.Field />
 <Form.Field />
 <Form.Submit /> </Form>
69. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
70. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); const Control = typeof control === 'function' ? control : CONTROLS[control]; return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value })} {...inputProps} /> </div> ); }
71. function Field({ label, name, control, ...inputProps }) { const [state, setState] = useContext(FormContext); const Control = typeof control === 'function' ? control : CONTROLS[control]; return ( <div> <label htmlFor={name}>{label || capitalize(name)}:</label> <Control id={name} name={name} value={state[name] || ''} onChange={({ target }) => setState({ ...state, [name]: target.value })} {...inputProps} /> </div> ); }
75. Init
76. Init Loading
77. Init Loading Success
78. Init Loading Success Errors
79. Submit Server Success Errors
80. remoteCall Server { result: 'ok' } { errors: {…} }
81. remoteCall Server { result: 'ok' } { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
82. { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
83. { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
85. • simple form interface • extensible fields • standardized form layout 
 ) So far... 

86. • validations - client / server side • protection again double submit • nested fields • handle submit • ... more 
 ! What is missing? 

87. Libraries
88. * https://github.com/tannerlinsley/react-form + https://github.com/prometheusresearch/react-forms , https://github.com/codecks-io/react-reform - https://github.com/erikras/redux-form . https://github.com/Semantic-Org/Semantic-UI-React / https://github.com/jaredpalmer/formik 0 https://github.com/final-form/final-form 
 1 Libraries 

93. * https://github.com/tannerlinsley/react-form + https://github.com/prometheusresearch/react-forms , https://github.com/codecks-io/react-reform - https://github.com/erikras/redux-form . https://github.com/Semantic-Org/Semantic-UI-React / https://github.com/jaredpalmer/formik 0 https://github.com/final-form/final-form Libraries
94. Final Form Formik
97. 2
98. 2
99. https://github.com/final-form/ 3
100. ✅ Zero dependencies * ✅ Framework agnostic ✅ Opt-in subscriptions - only update on the state you need! ✅ 5 7.7k gzipped 5 - with React components
101. import * as FinalForm from 'react-final-form'; const SubmitTalkForm = () => ( <FinalForm.Form onSubmit={onSubmit} validate={validate} render={({ handleSubmit, pristine, invalid }) => ( <form onSubmit={handleSubmit}> <div> <label>Title</label> <FinalForm.Field name="title" component="input" /> </div> <FinalForm.Field name="email"> {({ input, meta }) => ( <div> <label>Email</label> <input type="email" {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </FinalForm.Field> <FinalForm.Field name="description" render={({ input, meta }) => (
102. validate={validate} render={({ handleSubmit, pristine, invalid }) => ( <form onSubmit={handleSubmit}> <div> <label>Title</label> <FinalForm.Field name="title" component="input" /> </div> <FinalForm.Field name="email"> {({ input, meta }) => ( <div> <label>Email</label> <input type="email" {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </FinalForm.Field> <FinalForm.Field name="description" render={({ input, meta }) => ( <div> <label>Description</label> <textarea {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} />
103. </div> )} </FinalForm.Field> <FinalForm.Field name="description" render={({ input, meta }) => ( <div> <label>Description</label> <textarea {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} /> <div> <label>Length</label> <FinalForm.Field name="" component={CONTROLS.select} options={LENGTH_O </div> <div> <label>Level</label> <FinalForm.Field name="" component={CONTROLS.radioGroup} options={LEVEL_OPTIONS} /> </div>
104. /> <div> <label>Length</label> <FinalForm.Field name="" component={CONTROLS.select} options={LENGTH_O </div> <div> <label>Level</label> <FinalForm.Field name="" component={CONTROLS.radioGroup} options={LEVEL_OPTIONS} /> </div> <div> <label>Speakers</label> <FinalForm.Field name="speakers" component={SpeakersInput} /> </div> <button type="submit" disabled={pristine || invalid}> Submit </button> </form> )} /> );
105. /> <div> <label>Length</label> <FinalForm.Field name="" component={CONTROLS.select} options={LENGTH_O </div> <div> <label>Level</label> <FinalForm.Field name="" component={CONTROLS.radioGroup} options={LEVEL_OPTIONS} /> </div> <div> <label>Speakers</label> <FinalForm.Field name="speakers" component={SpeakersInput} /> </div> <button type="submit" disabled={pristine || invalid}> Submit </button> </form> )} /> ); 6
106. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
108. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form> import * as FinalForm from 'react-final-form'; const SubmitTalkForm = () => ( <FinalForm.Form onSubmit={onSubmit} validate={validate} render={({ handleSubmit, pristine, invalid }) => ( <form onSubmit={handleSubmit}> <div> <label>Title</label> <FinalForm.Field name="title" component="input" /> </div> <FinalForm.Field name="email"> {({ input, meta }) => ( <div> <label>Email</label> <input type="email" {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </FinalForm.Field> <FinalForm.Field name="description" render={({ input, meta }) => ( <div> <label>Description</label> <textarea {...input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} /> <div> <label>Length</label> <FinalForm.Field name="" component={CONTROLS.select} options={LENGTH_OPTIONS} </div> <div> <label>Level</label> <FinalForm.Field name="" component={CONTROLS.radioGroup} options={LEVEL_OPTIONS} /> </div> <div> <label>Speakers</label> <FinalForm.Field name="speakers" component={SpeakersInput} /> </div> <button type="submit" disabled={pristine || invalid}> Submit </button> </form> )} /> );
109. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
110. function Form({ initialValues, onSubmit, children }) { return ( <FinalForm.Form onSubmit={onSubmit} initialValues={initialValues || {}}> {({ handleSubmit }) => <form onSubmit={handleSubmit}>{children}</form>} </FinalForm.Form> ); }
111. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
112. export default function Field({ control, ...props }) { control = typeof control === 'function' ? control : CONTROLS[control]; return <FinalForm.Field control={control} component={FieldRow} {...props} />; } function FieldRow({ control: Control, label, meta, input, fields, ...inputProps }) { const error = meta.error || meta.submitError; const name = input.name; return ( <div> <div> <label htmlFor={name}>{label || capitalize(name)}:</label> {error && <span>{error}</span>} </div> <Control id={name} {...input} {...inputProps} /> </div> ); }
113. function FieldRow({ control: Control, label, meta, input, fields, id, ...inputProps }) { const error = meta.error || meta.submitError; const name = input.name; id = React.useMemo(() => id || uniqueId(`form-${name}-`), [id, name]); return ( <div> <div> <label htmlFor={id}>{label || capitalize(name)}:</label> {error && <span>{error}</span>} </div> <Control id={id} {...input} {...inputProps} /> </div> ); }
114. function FieldRow({ control: Control, label, meta, input, fields, id, ...inputProps }) { const error = meta.error || meta.submitError; const name = input.name; id = React.useMemo(() => id || uniqueId(`form-${name}-`), [id, name]); return ( <div> <div> <label htmlFor={id}>{label || capitalize(name)}:</label> {error && <span>{error}</span>} </div> <Control id={id} {...input} {...inputProps} /> </div> ); }
115. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
116. Form.Submit = () => ( <FormSpy> {form => ( <React.Fragment> <input type="submit" disabled={form.submitting} value={`Submit${form.submitting ? '...' : ''}`} /> {form.submitSucceeded && '7 Submitted'} {form.submitting && '8 Saving…'} {form.submitFailed && '9 Oh-oh! There has been an error…'} </React.Fragment> )} </FormSpy> );
117. Form.Submit = () => ( <FormSpy> {form => ( <React.Fragment> <input type="submit" disabled={form.submitting} value={`Submit${form.submitting ? '...' : ''}`} /> {form.submitSucceeded && '7 Submitted'} {form.submitting && '8 Saving…'} {form.submitFailed && '9 Oh-oh! There has been an error…'} </React.Fragment> )} </FormSpy> );
118. Form.Submit = () => ( <FormSpy> {form => ( <React.Fragment> <input type="submit" disabled={form.submitting} value={`Submit${form.submitting ? '...' : ''}`} /> {form.submitSucceeded && '7 Submitted'} {form.submitting && '8 Saving…'} {form.submitFailed && '9 Oh-oh! There has been an error…'} </React.Fragment> )} </FormSpy> );
119. <FormSpy> {form => console.log(form)} </FormSpy> { "dirty": false, "dirtyFields": {}, "dirtySinceLastSubmit": false, "errors": {}, "hasSubmitErrors": false, "hasValidationErrors": false, "initialValues": {}, "invalid": false, "modified": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "pristine": true, "submitting": false, "submitFailed": false, "submitSucceeded": false, "touched": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "valid": true, "validating": false, "values": {}, "visited": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "form": { "mutators": {} }, "mutators": {} }
120. <FormSpy> {form => console.log(form)} </FormSpy> { "dirty": false, "dirtyFields": {}, "dirtySinceLastSubmit": false, "errors": {}, "hasSubmitErrors": false, "hasValidationErrors": false, "initialValues": {}, "invalid": false, "modified": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "pristine": true, "submitting": false, "submitFailed": false, "submitSucceeded": false, "touched": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "valid": true, "validating": false, "values": {}, "visited": { "title": false, "email": false, "description": false, "length": false, "level": false, }, "form": { "mutators": {} }, "mutators": {} } 2
123. https://github.com/final-form/final-form-arrays [3]
124. export default function Field({ control, ...props }) { control = typeof control === 'function' ? control : CONTROLS[control]; const Field = control.isArray ? FieldArray : FinalForm.Field; return <Field control={control} component={FieldRow} {...props} />; } function FieldRow({ control: Control, label, meta, input, fields, id, ...props}) { const error = meta.error || meta.submitError; const name = input ? input.name : fields.name; id = React.useMemo(() => id || uniqueId(`form-${name}-`), [id, name]); return ( <div> <div> <label htmlFor={id}>{label || capitalize(name)}:</label> {error && <span>{error}</span>} </div> {fields ? ( <Control fields={fields} id={id} {...props} /> ) : ( <Control id={id} {...input} {...props} /> )} </div> ); }
125. export default function Field({ control, ...props }) { control = typeof control === 'function' ? control : CONTROLS[control]; const Field = control.isArray ? FieldArray : FinalForm.Field; return <Field control={control} component={FieldRow} {...props} />; } function FieldRow({ control: Control, label, meta, input, fields, id, ...props}) { const error = meta.error || meta.submitError; const name = input ? input.name : fields.name; id = React.useMemo(() => id || uniqueId(`form-${name}-`), [id, name]); return ( <div> <div> <label htmlFor={id}>{label || capitalize(name)}:</label> {error && <span>{error}</span>} </div> {fields ? ( <Control fields={fields} id={id} {...props} /> ) : ( <Control id={id} {...input} {...props} /> )} </div> ); }
126. function SpeakersInput({ fields }) { return ( <React.Fragment> {fields.map((name, index) => ( <div key={name}> {index + 1} <Form.Input name={`${name}.firstName`} placeholder="First Name" /> <Form.Input name={`${name}.lastName`} placeholder="Last Name" /> <button onClick={e => { e.preventDefault();fields.remove(index); }}> remove </button> </div> ))} <button onClick={e => { e.preventDefault(); fields.push(undefined); }}> add speaker </button> </React.Fragment> ); } SpeakersInput.isArray = true;
128. <Form> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form>
129. <Form.Mutation onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="description" control="textarea" /> <Form.Field name="length" control="select" options={LENGTH_OPTIONS} /> <Form.Field name="level" control="radioGroup" options={LEVEL_OPTIONS} /> <Form.Field name="speakers" control={SpeakersInput} /> <Form.Submit /> </Form.Mutation>
130. Form.Mutation = ({ children, mutation, input, update, initialValues, onSubmit }) => { return ( <ApolloMutation mutation={mutation} update={update}> {(mutate) => { const submit = async (values) => { const response = await mutate({ variables: buildVariables(values, input); }); const errors = extractErrors(response); if (errors) { return errors; } if (onSubmit) { onSubmit(extractObject(response)); } }; return ( <Form initialValues={initialValues} onSubmit={submit}> {children} </Form> ); }} </ApolloMutation> ); };
131. https://github.com/RStankov/talks-code
134. ⚛ basic of form handling in React 0 build an extensible Form/Form.Field interface 3 integrated with good battle tested form library 
 ; Recap 

135. ⚛ basic of form handling in React 0 build an extensible Form/Form.Field interface 3 integrated with good battle tested form library < ...had some fun = 
 ; Recap 

139. Thanks >