Add label to useController/Controller?

[ftzi]

I like to display a popup with the error if the user presses submit. It shows ${label} - ${errorMessage}. I show the TextInput label and not the field name as the label is in another language, and the field name mayBeStrangeToTheUser, specially if the user doesn't know english (only ~8% of population here in Brazil know English, for example).

This is my handleSubmit:

const signInIdToLabel: Record<keyof SignInProps, string> = {
  email: 'Email',
  password: 'Senha',
};

const onPress = handleSubmit(
  async function valid(p) {
    ...
  },
  function invalid(e) {
    const error = Object.entries(e)[0]!;
    const label = (signInIdToLabel as any)?.[error[0]] ?? error[0];
    const message = `${label} - ${error[1].message}`;
    Alert.alert('Error', message);
  },
);

This works, but required objects like my signInIdToLabel. I don't like having them. I wish the labels were only in my components.

I have my own TextInput etc components. They use useController hook. My idea is to have a field in useController to set the field label, and they are passed to the Error object. They currently are

Object {
  "email": Object {
    "message": "Email inválido",
    "ref": Object {
      "name": "email",
    },
    "type": "validEmail",
  },
  "password": Object {
    "message": "Requerido",
    "ref": Object {
      "name": "password",
    },
    "type": "required",
  },
}

And there could be a new field there as label, that I would enter in each field's useController.

There is a metadata suggestion that maybe could also allow this, if they were passed to the errors.

I think this is really important to improve error messages.

[bluebill1049]

don't we pass down name prop?

[ftzi]

But name isn't always User-friendly, specially if the user doesn't know english

[bluebill1049]

I see, perhaps you can do a rename at your app-level?

const { name: label } = useController()

[ftzi]

But if I do that I will have different properties on onSubmit. This is a big issue on API calls, specially if the app if multi language.

[ftzi]

@bluebill1049 did you understand my point? This would be really useful to me to have smarter codes.