react-native - 验证动态添加的输入

问题描述

我正在使用 nativebase 和 react hook 表单进行表单验证，它工作得很好，但我有这样的情况，即可以通过单击模式中的联系人项目来输入或填充电话号码字段。当从联系人列表中填写并尝试提交时，该字段未经过验证，我无法提交，直到我输入它触发onChangeText. 动态添加输入时如何验证表单字段。下面是我的代码

import {
  Input,
  FormControl,
  ...
  ...
} from "native-base";
 const {
        control,
        handleSubmit,
        formState: { errors },
      } = useForm();

 <FormControl isRequired isInvalid={"customer" in errors}>
      <Text color="gray.500" style={{fontFamily:fontFamily.semiBold, fontSize:14, marginBottom:5, left:3}}>Phone Number</Text>
                  <Controller
                    control={control}
                    rules={{
                      required: true,
                    }}
                    render={({ field: { onChange, onBlur, value } }) => 
                      (
                      <Input
                      value={formData.customer}
                        selectionColor="brand.500"
                       
                        keyboardType="numeric"
                        variant="filled"
                        placeholder=""
                        _focus={{
                          borderColor: "brand.500",
                        }}
                        onBlur={onBlur}

                        InputRightElement={
                            
                              <Button
                                style={{ backgroundColor: "transparent" 
                               }}
                                onPress={()=>{
                                    setData((prevState) => ({
                                        ...prevState,
                                        isVisibleShowContacts: true,
                                      }));

                                }}
                              >
                               <Icon
                      style={{ left:5}}
                      color="gray.600"
                      size={6}
                      as={AntDesign}
                      name="contacts"
                    />
                              </Button>
                        }
                        
                        onChangeText={(val) => {
                          onChange(val);
                           setFormData((prevState) => ({
                                ...prevState,
                                customer: val,
                              }));
                            
                           
                          
                         }
                        }
                      />
                    )}
                    name="customer"
                    defaultValue=""
                  />
                  <FormControl.ErrorMessage>
                    {errors.customer && (
                      <Text
                        style={{
                          fontSize: 12,
                          textAlign: "right",
                          fontFamily: fontFamily.semiBold,
                        }}
                      >
                        Required
                      </Text>
                    )}
                  </FormControl.ErrorMessage>
                  </FormControl>
             <Button
              bgColor="brand.600"
              style={{
                marginTop: 30,
                margin: 40,
                borderRadius: 50,
                elevation: 4,
              }}
              
              onPress={handleSubmit(submit)}
              
            ><Text
                  style={{
                    fontFamily: fontFamily.semiBold,
                    color: "white",
                  }}
                >
                   Submit
                </Text>
              
            </Button>

标签： react-nativenative-basereact-hook-form

react-native - 验证动态添加的输入

问题描述

解决方案

推荐阅读