Is possible combine two fields in one Controller?

[wildfrontend]

show a example , i am created a addres field,have two field

my idea is use one controller to wrap two field, and i try it like this to combine value,in one Controller , look like working fine
but i dont knowis it a good pattern ?

select field

  props.onChange({ ...props.value, districtId: district.districtId })

input field

   props.onChange({ ...props.value, streetAddress: e.target.value })

ex:

export const Address = () => {
    const { control, handleSubmit, watch, register } = useForm({
        defaultValues: { 
              address:{
                     districtId:"",
                     streetAddress:""
              }
        },
    })
    console.log(watch())
    return (
        <form>

            <Controller control={control}  name="address" as={<FieldAdress />} />
  
        </form>
    )
}

FieldAddress

const Address = (props) => {
    // console.log(props) value,name,onChange,onBlur
    // ...
    return (
        <S.Field>
            <S.SelectGroup>
                //....
                <S.Select
                    onChange={(e) => {
                        const district = JSON.parse(e.target.value)
                        // console.log(district)
                        setDistrict(district)
                        props.onChange({ ...props.value, districtId: district.districtId })
                    }}
                >
                    <S.SelectOption value="{}">鄉鎮</S.SelectOption>
                    {districts.map((d, i) => {
                        const {
                            value: { name, ...dValue },
                        } = d
                        const dString = JSON.stringify(dValue)
                        return (
                            <S.SelectOption key={i} value={dString}>
                                {name}
                            </S.SelectOption>
                        )
                    })}
                </S.Select>
                <Input disabled defaultValue={postalCode} placeholder="郵遞區號" />
            </S.SelectGroup>
            <Input
                onChange={(e) => {
                    props.onChange({ ...props.value, streetAddress: e.target.value })
                }}
                placeholder="地址"
            />
        </S.Field>
    )
}

Demo

[bluebill1049]

yes, it's possible. it depend on how you structure you inner component, i would make component local state to be an object.

onChange({
address: 'yes',
another: 'yes',
})

[wildfrontend]

thanks!

[piyushmani]

can you please show me a example .
I have to pass 4 fields out of 30 in custom component and call on change to update one or all 4 field in custom component

[Moshyfawn]

<Controller
  control={control}
  name='object'
  render={({ field }) => (
    <div>
      <input
        id='foo'
        value={field.value.foo}
        onChange={event =>
          field.onChange({ ...field.value, foo: event.target.value })
        }
      />
      <input
        id='bar'
        value={field.value.var}
        onChange={event =>
          field.onChange({ ...field.value, bar: event.target.value })
        }
      />
      <input
        id='value'
        value={field.value.value}
        onChange={event =>
          field.onChange({ ...field.value, value: event.target.value })
        }
      />
      <input
        id='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        value={field.value['https://www.youtube.com/watch?v=dQw4w9WgXcQ']}
        onChange={event =>
          field.onChange({
            ...field.value,
            'https://www.youtube.com/watch?v=dQw4w9WgXcQ': event.target.value
          })
        }
      />
    </div>
  )}
/>

[bryanprimus]

@Moshyfawn with the solution that you shared? is it possible to have a safe typescript type?

like

field.onChange({foo: "", bar: "", value: ""})

because I check the onChange type in the field. its always any

[Rashed360]

@Moshyfawn damn! I got rick-rolled!

[charismanapriandi]

hi, I've tried the method above and it works fine. but the problem is I can't make the field required.

Parrent:

<Controller
  name={'phone_number'}
  control={control}
  rules={{
    required: true
  }}
  render={({field}) => (
    <InputPhoneNumber 
      {...field} 
      label='phone' 
      required />
  )}
/>
<ErrorMessage
  isActive={errors.phone_number?.ext_phone?.type === 'required' }
  message={errorMessage.required}
/>
<ErrorMessage
  isActive={errors.phone_number?.phone?.type === 'required'}
  message={errorMessage.required}
/>

Child:

const [isFocus, setIsFocus] = useState(false)
const [options, setOptions] = useState<SelectOptionType[]>([])

const handleChangeExtPhone = (data: SelectOptionType | null) => {
  const value = rest.value
  rest.onChange({ ...(value as InputPhoneNumberType), ext_phone: data?.value})
}

const handleChangePhone = (data: ChangeEvent) => {
  const target = data.target as HTMLInputElement;
  const value = rest.value
  rest.onChange({ ...(value as InputPhoneNumberType), phone: target.value})
}

useEffect(() => {
  setOptions([])
  phoneDialCodeList.map((item) => {
    setOptions(prevState => [...prevState, {label: item.name, value: item.dial_code}])
  })
}, [])

return (
  <Wrapper {...rest} onFocus={() => setIsFocus(true)} onBlur={() => setIsFocus(false)}>
    <InputLabel required={required}>{label}</InputLabel>
    <InputRow isFocus={isFocus}>
      <ReactSelect
        name='ext_phone'
        styles={customSelectStyle}
        onChange={(e) => handleChangeExtPhone(e)}
        isLoading={isLoading}
        isSearchable={true}
        options={options}
      />
      <Input
        type='number'
        onChange={(e: ChangeEvent) => handleChangePhone(e)}
      />
    </InputRow>
  </Wrapper>
)

[Moshyfawn]

I don't see what's the use of RHF in your example. I'd advice you to create a codesanbox with your isolated example instead of pasting in a plain code.
I suspect you want the rules option on useController / <Controller />, if that's what you're using. You can set required: "Error message" or pass a custom validate callback for more refined validation control.
Refer to the RHF docs on controlled inputs for more info.

[kfcaio]

@Moshyfawn Is it reasonable to get "RangeError: Maximum call stack size exceeded" depending on the number/nesting of input fields?

Call Stack
cloneObject
webpack-internal:///./node_modules/react-hook-form/dist/index.esm.mjs (580:21)

In my case, it looks like that adding one more antd's Form.Item results in error.

My form:

<>
      <Form fields={[{ name: ['accessType'], value: selectedAccessType }]}>
        <Controller
          control={control}
          name={'newAccount'}
          render={({ field }) => (
            <>
              <Form.Item label={'Sistema'} name={'systemId'} required={true}>
                <Select
                  onChange={(value) => {
                    field.onChange({ ...field.value, systemId: value });
                    setSelectedSystem(value);
                  }}
                  options={systems.map((x) => ({
                    label: x.nome,
                    value: x.id
                  }))}
                  placeholder={'Escolha o tribunal/sistema no qual será cadastrada a conta'}
                />
              </Form.Item>
              <Form.Item label={'Instância'} name={'instance'} initialValue={null} hidden={isInstanceSelectorHidden}>
                <Select
                  onChange={(value) => {
                    field.onChange({ ...field.value, instance: value });
                  }}
                  options={instanceOptions}
                  placeholder={'Escolha a instância em que será feita a coleta'}
                />
              </Form.Item>
              <Form.Item
                label={'Tipo de acesso'}
                name={'accessType'}
                required={true}
                hidden={!currentSystem ? true : false}
              >
                <Select
                  onChange={(value) => {
                    field.onChange({ ...field.value, accessType: value });
                    setSelectedAccessType(value);
                  }}
                  options={accessTypeOptions}
                  placeholder={'Escolha o tipo de acesso ao tribunal'}
                />
              </Form.Item>
              <Form.Item label={'Acessar todos os perfis'}>
                <Input.Group>
                  <Form.Item name={'accessAllProfiles'} valuePropName={'checked'} initialValue={false} noStyle>
                    <Switch
                      onChange={(value) => {
                        field.onChange({ ...field.value, accessAllProfiles: value });
                      }}
                    />
                  </Form.Item>
                </Input.Group>
              </Form.Item>
              <Form.Item label={'Ler tudo'}>
                <Input.Group>
                  <Form.Item name={'readAll'} valuePropName={'checked'} initialValue={false} noStyle>
                    <Switch
                      onChange={(value) => {
                        field.onChange({ ...field.value, readAll: value });
                      }}
                    />
                  </Form.Item>
                </Input.Group>
              </Form.Item>
              <Form.Item>
                <Button
                  disabled={isSaveButtonDisabled}
                  type={'primary'}
                  onClick={handleSubmit((data) => console.log('data:', data))}
                >
                  Salvar
                </Button>
              </Form.Item>
            </>
          )}
        />
      </Form>
      <Checkbox onChange={() => setSaveButtonDisabled(!isSaveButtonDisabled)}>
        Ao informar meus dados, eu concordo com os{' '}
        <a href={'https://example.com/'}>
          <strong>Termos de Uso</strong>
        </a>
      </Checkbox>
    </>

[jasminluka]

A little bit late but in case you still need it, you can use validate function in rules

rules={{ validate: ({ ext_phone, phone }) => { if (!ext_phone || !phone) return "Phone number is required"; } }}

[ArjunKarki]

@jasminluka it works for field required. but it is not showing error for specific field. if tow field are required , the error message is overwrite with last message. possible to throw error with specific field .Thanks