Form Field add showIf and selector props

[mfrancis107]

It's common that some fields are dependent on other fields. Particularly when wanting to hide/show sub fields/forms.
To solve this I propose adding a selector and showIf property to the form.Field component.

Here's an example of what I would usually need to do.

<form.Subscribe
    selector={(state) => state.values.departmentId}
    children={(departmentId) => (
        <>
            {departmentId && (
                <form.Field name="courseId">
                    {(field) => (
                        <>
                            <h2 className="mb-2 text-lg">Course</h2>
                            <CourseCombobox
                                universityId={universityId}
                                courseId={field.state.value}
                                departmentId={departmentId}
                                onChange={(course) => {
                                    field.handleChange(course.courseId);
                                }}
                            />
                            <Button
                                type="button"
                                variant="primary-light"
                                onClick={() => {
                                    setAddCourseModalOpen(true);
                                }}
                            >
                                Add Course
                            </Button>
                        </>
                    )}
                </form.Field>
            )}
        </>
    )}
></form.Subscribe>

The above example would turn into this.

<form.Field
    name="courseId"
    selector={(state) => state.values.departmentId}
    showIf={(departmentId) => departmentId}
    children={(field, departmentId) => (
        <>
            <h2 className="mb-2 text-lg">
                Course for{" "}
                {departments[departmentId].name}
            </h2>
            <CourseCombobox
                universityId={universityId}
                courseId={field.state.value}
                departmentId={departmentId}
                onChange={(course) => {
                    field.handleChange(course.courseId);
                }}
            />
            <Button
                type="button"
                variant="primary-light"
                onClick={() => {
                    setAddCourseModalOpen(true);
                }}
            >
                Add Course
            </Button>
        </>
    )}
/>