Estoy usando un área de texto antd en reactjs y tengo algunas reglas predefinidas como:

 const validationRules = [ { required: true, message: 'Required', }, { min: MIN_LENGTH, message: `min ${MIN_LENGTH} characters required`, }, ];

El elemento del formulario es el siguiente:

 <Form.Item name="myField" rules={validationRules}> <TextArea className="mt-32" rows={6} placeholder={`Your answer should be between ${MIN_LENGTH} to ${MAX_LENGTH} characters`} minLength={MIN_LENGTH} maxLength={MAX_LENGTH} value={value} /> </Form.Item>;

Ahora desea agregar una regla de validación personalizada, es decir, para advertir al usuario si ingresa más de 2 espacios finales.
Para esto he creado un validador personalizado como:

 async function validateEmptySpaces(rule: any, inputValue: string) { const trimmedValue = inputValue.trim(); const diffInLength = inputValue.length - trimmedValue.length; if (diffInLength > 1) { throw new Error("remove empty spaces"); } }

Así que agrego este validador a las reglas mu al final como:

 const validationRules = [ { required: true, message: "Required", }, { min: MIN_LENGTH, message: `min ${MIN_LENGTH} characters required`, }, { validator: validateEmptySpaces }, ];

Ahora así es como puedo ver en la interfaz de usuario

Aquí, en lugar de 1 error a la vez, muestra ambos errores. ¿Cómo puedo hacer que muestre solo un mensaje de error a la vez como: