reactjswatchreact-hook-form

How to make a dynamic watch()/usewatch() with react-hook-forms


I am having an issue were I need to generate a form from a schema and have fields dependent on each other such as enabled/disable show/hide etc.

my schema looks something like this.

  contractorInformation: {
    title: "ContractorInformation",
    type: "object",
    properties: {
      contractorName: {
        title: "Contractor Name",
        type: "string",
        ui: "input",
        constraints: {
          required: true
        }
      },
      contractorFavouriteAnimal: {
        title: "Contractor Favourite Animal",
        type: "string",
        ui: "input",
        constraints: {},
        dependencies: {
          disabled: true,
          watching: "contractorName"
          // //disabled={!fullName || fullName.length === 0 || errors.fullName}
        }
      },
      contractorEmail: {
        title: "Contractor Email",
        type: "string",
        ui: "input",
        constraints: {
          common: 10
        }
      }
    }
  },
  agencyInformation: {
    title: "ContractorInformation",
    type: "object",
    properties: {
      contractorName: {
        title: "Contractor Name",
        type: "string",
        ui: "input",
        constraints: {
          required: true,
          minLength: 3,
          maxLength: 5
        },
        dependencies: {
          disabled: true,
          watching: "agencyName"
          
        }
      }
    }
  }
}

const watchThese = watch() would allow me to watch everything but if I wanted to change this field from disabled to enabled I could use <input disabled={!watchThese || watchThese.length === 0 || watchThese.fullName}/> which works but is obviously triggered by every field.

How could I generate a dynamic watch()/useWatch() from a schema and be able to access the specific dependencies I need to enable/disable the input.

Any help would be gratefully received.


Solution

  • For future reference I solved it by using

    export const FormField = () => 
    
    {Object.entries(schema?.actions ?? {}).forEach(([key, value]) => value(watch(key)));
    
    return (<div></div>)}
    

    and update schema to match.