Cómo configurar un array en useForm y validar la longitud de un valor?

23 Jul, 2023 Programación 0

Estoy utilizando react-hook-form.
Lo que quiero hacer es agregar un valor a un arreglo y
validar la longitud del valor.
Este es el valor predeterminado.

    defaultValues: {
      title: '',
      role: '',
      language: {source: '', target: []},
      industry: '',
      due_at: '',
      content: '',
    },

y este es el campo de entrada que maneja language.target.

<controller name="language.target" control="{control}" rules="{{" required:="" true,="" setvalues:="" (v)=""> setValue([...getValues('language.target'), v.value]),
    validate: (value) => {
    return '';
     },
      }}
    render={({field: {onChange}}) => (
       <select options="{languageIndex}" onchange="{(value)" ==""> onChange(value.value)}
           value={languageIndex.filter(
           (item) => item.value === getValues('language.target')
              )}
           placeholder="Seleccionar"
           />
       )}
 />

Intenté de esta manera agregar un valor como se muestra a continuación y no funcionaron:
– setValues: (v) => setValue([...getValues('language.target'), v.value]),
– setValues: (v) => [...getValues('language.target'), v.value],

Además, no tengo idea de cómo validar la longitud del arreglo.
Si language.target.length es mayor a 3,
quiero detener la configuración del valor.
Si tienes alguna buena idea, por favor compártela conmigo. ¡Gracias!

davy.ai

July 23, 2023 at 7:09 am

Para agregar un valor al array language.target, puedes usar la función setValue proporcionada por react-hook-form. Puedes actualizar la regla setValues en el Controller de esta manera:

setValues: (v) => {
  const newValue = [...getValues("language.target"), v.value];
  setValue("language.target", newValue);
  return newValue;
}

Este código primero obtiene el valor actual del array usando getValues, y luego agrega el nuevo valor al final del array. Luego actualiza el valor usando setValue y devuelve el nuevo valor del array.

Para validar la longitud del array, puedes crear una regla de validación personalizada utilizando la función register proporcionada por react-hook-form. Puedes registrar una nueva regla de validación de esta manera:

register("language.target", {
  validate: (value) => {
    return value.length <= 3 || "Los objetivos de lenguaje deben ser 3 o menos";
  }
});

Este código registra una nueva regla de validación para el campo language.target utilizando register. La función validate verifica que la longitud del array sea menor o igual a 3, y devuelve un mensaje de error en caso contrario.

Con estos cambios, el código actualizado del Controller se vería así:

<controller name="language.target" control="{control}" rules="{{" required:="" true,="" setvalues:="" (v)=""> {
      const newValue = [...getValues("language.target"), v.value];
      setValue("language.target", newValue);
      return newValue;
    }
  }}
  onChange={([selected]) => {
    return { value: selected };
  }}
  render={({ field: { onChange } }) => (
    <select options="{languageIndex}" onchange="{(value)" ==""> onChange(value.value)}
      value={languageIndex.filter(
        (item) => item.value === getValues("language.target")
      )}
      placeholder="Select"
    />
  )}
/>

Ten en cuenta que agregué una función onChange al Controller que devuelve un objeto con una propiedad value. Esto es necesario porque el componente Select requiere un objeto con una propiedad value para la opción seleccionada, pero react-hook-form almacena el valor seleccionado directamente como una cadena o array.

Answer

davy.ai

July 23, 2023 at 7:09 am
Para agregar un valor al array language.target, puedes usar la función setValue proporcionada por react-hook-form. Puedes actualizar la regla setValues en el Controller de esta manera:
```
setValues: (v) => {
  const newValue = [...getValues("language.target"), v.value];
  setValue("language.target", newValue);
  return newValue;
}
```
Este código primero obtiene el valor actual del array usando getValues, y luego agrega el nuevo valor al final del array. Luego actualiza el valor usando setValue y devuelve el nuevo valor del array.

Para validar la longitud del array, puedes crear una regla de validación personalizada utilizando la función register proporcionada por react-hook-form. Puedes registrar una nueva regla de validación de esta manera:
```
register("language.target", {
  validate: (value) => {
    return value.length <= 3 || "Los objetivos de lenguaje deben ser 3 o menos";
  }
});
```
Este código registra una nueva regla de validación para el campo language.target utilizando register. La función validate verifica que la longitud del array sea menor o igual a 3, y devuelve un mensaje de error en caso contrario.

Con estos cambios, el código actualizado del Controller se vería así:
```
<controller name="language.target" control="{control}" rules="{{" required:="" true,="" setvalues:="" (v)=""> {
      const newValue = [...getValues("language.target"), v.value];
      setValue("language.target", newValue);
      return newValue;
    }
  }}
  onChange={([selected]) => {
    return { value: selected };
  }}
  render={({ field: { onChange } }) => (
    <select options="{languageIndex}" onchange="{(value)" ==""> onChange(value.value)}
      value={languageIndex.filter(
        (item) => item.value === getValues("language.target")
      )}
      placeholder="Select"
    />
  )}
/>
```
Ten en cuenta que agregué una función onChange al Controller que devuelve un objeto con una propiedad value. Esto es necesario porque el componente Select requiere un objeto con una propiedad value para la opción seleccionada, pero react-hook-form almacena el valor seleccionado directamente como una cadena o array.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo configurar un array en useForm y validar la longitud de un valor?

Answer

davy.ai