我目前正在react-native中开发一个移动的应用程序（实际上是在登录页面上）。
我想在TextInput字段为空时显示一条错误消息。
为此，我尝试使用@react-hook-form库
我 Package 我的TextInput到一个控制器，我设置了一个“规则”的“必需”和消息，我想打印，但它不工作...
<View>
<Controller
control={control}
name="username"
defaultValue=""
rules={{
required: { value: true, message: "Nom d'utilisateur nécessaire" },
}}
render={({ field: { onChange, value } }) => (
<TextInput
value={value}
placeholder={'utilisateur'}
autoFocus={true}
onChangeText={(text: string) => {
onChange(text);
handleChangeText(text, 'login');
}}
onSubmitEditing={() => refPasswordInput.current?.focus()}
/>
)}
/>我到处都找过了，但什么也没找到。
先谢谢你了
[编辑]
这是第一个答案之后的更新组件：
<View>
<Controller
control={control}
name="username"
defaultValue=""
rules={{
required: { value: true, message: "Nom d'utilisateur nécessaire" },
}}
render={({ field: { onChange, value } }) => (
<TextInput
value={value}
placeholder={'utilisateur'}
autoFocus={true}
onChangeText={(text: string) => {
onChange(text);
handleChangeText(text, 'login');
}}
onSubmitEditing={() => refPasswordInput.current?.focus()}
/>
{errors.username && <Text>{errors.username.message}</Text>}
)}
/>
</View>这是我得到的屏幕：
1条答案
按热度按时间zfciruhq1#
为了显示来自React Hook Form的错误消息，您需要读取每个表单字段的错误对象，并将其显示在TextInput下。
在您的示例中，可以通过
errors.username对象访问“username”字段错误。如果该字段有任何验证错误，它将有一个包含“message”字段的对象，其中包含错误消息。您可以在需要时使用它来显示错误。以下是如何修改代码以显示错误消息：
在上面的示例中，如果“用户名”字段有错误（如果由于您的规则而未填写，则会出现错误），它将在TextInput下方显示错误消息。此错误消息来自您为字段设置的规则。