Как устанавливать required true динамический в react hook form

Рейтинг: 0Ответов: 1Опубликовано: 16.01.2023

Я использую react hook form

  const form = useForm({ mode: 'all' });
  const { watch, setValue } = form;

У меня есть два таких поля

   <Field
      form={form}
      fieldName="show_advanced_settings"
      label=""
      renderInput={Checkbox}
      inputProps={{ label: intl.get('SHOW_ADVANCED_SETTINGS') }}
    />
    <Field
      form={form}
      fieldName="source_plate"
      label={intl.get('SOURCE_PLATE')}
      renderInput={Input}
      inputProps={{
        defaultValue: 'Source',
      }}
      registerOptions={{
        required: true,
        pattern: /^[A-Za-z0-9]+$/,
        maxLength: 100,
        min: 0,
      }}
      errorMessage={intl.get('ALLOWED_LATIN_LETTERS_AND_NUMBER')}
      info={intl.get('SOURCE_PLATE_INFO')}
    />

Когда я включаю чекбокс, мне нужно чтобы у поля source_plate менялось значение required по идее это должен делать метод register, а затем тригер должен отображать эти изменения form.register('source_plate', { required: true }); form.trigger('source_plate'); но почему-то это не работает, подскажите как это можно сделать, именно через react-hook form

reactjs react-hook-form
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

по идее это должен делать метод register

Поправка не register, а unregister.

Как это работает?

Вы изначально пишите required: true полю которую вам нужно чтобы было обязательно.

Пример

  <input
    type="radio"
    id="pickup"
    className="radio"
    value="pickup"
    {...register("deliveryMethod", { required: true })}
  />

Потом по клику на любой элемент просто через unregister снимаете этот input из списка обязательных.

  <input
    type="radio"
    id="pickup"
    className="radio"
    value="pickup"
    onClick={() => unregister("deliveryMethod")} // -> Вот так
    {...register("deliveryMethod", { required: true })}
  />

Пример как это работает можно посмотреть тут