correct-apricot

I need some help with two input that depends on each other

The first image shows the use case: I want to preselect an option if the select has only one option available. I tried to use the forn.setFieldValue on the form field listeners or the onChange but I was getting different issues with those options There's an standard way to watch for an input value and if the input changes I check on a list, it could be a fetch from and endpoint or a json and I want to set the value from that json

3 Replies

correct-apricotOP•7d ago

Forget it — I just had to use onChangeDebounceMs. I suppose the issue was that I wasn’t using await with the fetch call, and without await the value isn’t set at the moment I try to update the field. So we need to wait a little. I’d prefer to have a cleaner way to handle that:

listeners={{
  onChangeDebounceMs: 200,
}}

listeners={{
  onChangeDebounceMs: 200,
}}

also I had to use a form subscribe:

      <form.Subscribe
        selector={(state) => [
          state.values.commonAreaId,
          state.values.selectedPeriod,
        ]}
        children={([_, selectedPeriod]) => (
          <form.Field name="selectedPeriod">
            {(field) => (
              <>
                <h1>commonAreaId: {form.getFieldValue('commonAreaId')}</h1>
                <h1>selectedPeriod: {selectedPeriod}</h1>
                <h1>field.state.value: {field.state.value}</h1>
                <PeriodSelector
                  periods={
                    commonAreas.find(
                      (area) => area.id === form.getFieldValue('commonAreaId'),
                    )?.allowedPeriods || []
                  }
                  onPeriodChange={(period) => {
                    form.setFieldValue('selectedPeriod', period);
                  }}
                  value={field.state.value}
                  placeholder="Selecciona un período"
                  hidden={!form.getFieldValue('commonAreaId')}
                />
              </>
            )}
          </form.Field>
        )}
      />

      <form.Subscribe
        selector={(state) => [
          state.values.commonAreaId,
          state.values.selectedPeriod,
        ]}
        children={([_, selectedPeriod]) => (
          <form.Field name="selectedPeriod">
            {(field) => (
              <>
                <h1>commonAreaId: {form.getFieldValue('commonAreaId')}</h1>
                <h1>selectedPeriod: {selectedPeriod}</h1>
                <h1>field.state.value: {field.state.value}</h1>
                <PeriodSelector
                  periods={
                    commonAreas.find(
                      (area) => area.id === form.getFieldValue('commonAreaId'),
                    )?.allowedPeriods || []
                  }
                  onPeriodChange={(period) => {
                    form.setFieldValue('selectedPeriod', period);
                  }}
                  value={field.state.value}
                  placeholder="Selecciona un período"
                  hidden={!form.getFieldValue('commonAreaId')}
                />
              </>
            )}
          </form.Field>
        )}
      />

like-gold•6d ago

Looks like you managed to find a workaround yourself. However, I'll still answer this comment:

There's an standard way to watch for an input value

There is. You can use useStore

const myReactiveFieldA = useStore(form.store, state => state.values.fieldA)

const myReactiveFieldA = useStore(form.store, state => state.values.fieldA)

correct-apricotOP•6d ago

cool thanks! I'm going to check how I can update my form to use that

Gaming

Programming

I need some help with two input that depends on each other

Did you find this page helpful?