How to set a JS item as Mandatory

English Forum Questions
1

I have a requirement of displaying couple of JS items copy the selected values to another field. The values are date and time. I’ll then copy these to a different field. Requirement here is to make the JS items required on form submit. How can I achieve it?

function JsEditableField() {
  const React = ctx.React;
  const { Select } = ctx.antd;

  const [value, setValue] = React.useState(ctx.getValue?.() ?? undefined);

  // Helper to find and update another field in the same block
const updateTargetField = (nextValue) => {
  ctx.form.setFieldValue("remarks", "Date: " + nextValue);
};


  React.useEffect(() => {
    const handler = (ev) => {
      const newVal = ev?.detail ?? undefined;
      setValue(newVal);
      ctx.setValue?.(newVal);
      updateTargetField(newVal);
    };

    ctx.element?.addEventListener('js-field:value-change', handler);
    return () => ctx.element?.removeEventListener('js-field:value-change', handler);
  }, []);

  const onChange = (v) => {
    const newValue = v ?? undefined;
    setValue(newValue);
    ctx.setValue?.(newValue);
    updateTargetField(newValue);
  };

  const options = [
    '8th December',
    '9th December',
    '10th December',
    '11th December',
    '12th December',
    '13th December',
  ];



  return (
    <div style={{ width: '100%' }}>
      <label style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>
        Preferred Date Slot
      </label>

      <Select
        {...ctx.model.props}
        value={value}
        onChange={onChange}
        options={options.map((o) => ({ label: o, value: o }))}
        placeholder="Select a date"
        allowClear
        style={{ width: '100%' }}
      />
    </div>
  );
}

ctx.render(<JsEditableField />);
3

Sorry, you can’t use JS item to mark the field as required. I think you should use “JS field” instead for your use case.

4

Here the use case is to give users 2 dropdowns (e.g. State, City) via JS fields and then concatenate them and set an actual form field.