Проверка собственной формы React не работает с да - PullRequest
Новая
       59

Проверка собственной формы React не работает с да

0 голосов
/ 17 июня 2020

Я создал простую форму входа в систему в react native, используя formik и yup (проверка формы). Форма входа имеет только поле электронной почты и только поле пароля. Проверка поля электронной почты работает нормально. Поле проверки пароля отображается, когда длина пароля меньше 4. Однако, когда я ввожу длинный пароль, состоящий из 7 символов, сообщение об ошибке проверки все еще появляется на экране.

Пожалуйста, помогите мне в этом вопросе.

Это экран входа в систему 

import React, { Component } from "react";
import { StyleSheet, Image, View } from "react-native";

import Screen from "../components/Screen";
import AppTextInput from "../components/AppTextInput";
import AppButton from "../components/App/AppButton";
import AppText from "../components/AppText";
import ErrorMessage from "../components/ErrorMessage";

import { Formik, yupToFormErrors } from "formik"; // import formik
import * as Yup from "yup"; // import yup
import Colors from "../config/Color";

const LoginvalidationSchema = Yup.object().shape({
  email: Yup.string().required().email("Email"),
  password: Yup.string().required().min(4).label("Password")
});

const LoginScreen = () => {
  return (
    <Screen style={styles.container}>
      <Image style={styles.logo} source={require("../assets/logo-red.png")} />

      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={(values) => console.log(values)}
        validationSchema={LoginvalidationSchema}
      >
        {({ handleChange, handleSubmit, errors, setFieldTouched }) => (
          <React.Fragment>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="email"
              placeholder="Enter E-mail"
              keybordType="email-address"
              textContentType="emailAddress" // only works on iOS - textContentType
              onChangeText={handleChange("email")}
            />

            <ErrorMessage error={errors.email} />

            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="lock"
              placeholder="Enter Password"
              textContentType="password"
              secureTextEntry={true}
              onChangetext={handleChange("password")}
            />

            <ErrorMessage error={errors.password} />
            <AppButton
              title="Login"
              onPress={handleSubmit}
              color={Colors.primary}
            />
            <AppButton
              title="Register"
              onPress={() => {
                alert("Register pressed");
              }}
              color={Colors.secondary}
            />
          </React.Fragment>
        )}
      </Formik>
    </Screen>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: "center",
    marginTop: 50,
    marginBottom: 20,
  },
});

export default LoginScreen;

Это компонент сообщения об ошибке, который отображает сообщение об ошибке 

import React, { Component } from "react";
import { StyleSheet } from "react-native";

import AppText from "./AppText";
import Colors from "../config/Color";

const ErrorMessage = (props) => {
  if (!props.error) return null;
  return <AppText style={styles.error}>{props.error}</AppText>;
};

const styles = StyleSheet.create({
  error: {
    color: Colors.red,
  },
});

export default ErrorMessage;

Это текстовый компонент приложения 

import React, { Component } from "react";
import { StyleSheet, Platform, Text } from "react-native";

import Colors from '../config/Color';
import defaultStyles from '../config/Style'

const AppText = ({children, style}) => {

  return <Text style={[styles.text, style]}>{children}</Text>;
};

const styles = StyleSheet.create({
  text: {
    color: Colors.black,
    fontSize:18,
    ...Platform.select({
      ios: {
        fontFamily: "Avenir",
      },
      android: {
        fontFamily: "Roboto",
      },
    }),
  },
});

export default AppText;

Обратите внимание, что я использовал formik версии 2.1.4 и yup версии 0.29.1

Пожалуйста, будьте любезны, чтобы помочь мне с этой проблемой.

Заранее спасибо, Йохан

...