React Native - Почему ошибка появляется только при нажатии кнопки, когда я назначаю textInput для onchange?

Question

У меня возникла проблема при выполнении какого-либо проекта.

import React,{Component} from "react";
import {StyleSheet,Text,View,TextInput, 
TouchableOpacity,Keyboard,KeyboardAvoidingView,Image} from "react-native";
import {reduxForm,Field} from "redux-form";

const validate = values =>{
const errors = {};
emailform = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i
if(!values.email){
    errors.email="not correct format for email address"
}else
    if(!emailform.test(values.email)){
        errors.email="not correct format for email address"
    }

if(!values.password){
    errors.password="please use at least 6 - 12 characters"
}else
    if(values.password.length < 6 || values.password.length > 12){
        errors.password="please use at least 6 - 12 characters"
    }

return errors;
}

const myField = ({label, placeholder ,meta:{error, touched}, input:{onChange}}) =>{
return(
    <View>
    <Text style={styles.inputlabel}> {(label)} </Text>
      <TextInput 
        style={styles.input}
        onChangeText={onChange}
      />
      {touched && (error && (<Text style={styles.errormessage}>{error}</Text>))}
    </View>
);
}

const submit = values =>{
alert('Login Success!');
}

const myFormCom = props=>{
const {handleSubmit, invalid} = props;
return(

    <KeyboardAvoidingView behavior="padding" style={styles.container}>
    <View style={styles.logoContainer}>
      <Image 
        style={styles.logo}
        source={require('./src/images/Logo.png')}
        />
    </View>
    <View style={styles.formContainer}>

    <Field
        name="email"
        component={myField}
        label="Email"
    />

     <Field
        name="password"
        component={myField}
        label="Password"
    />

      <TouchableOpacity 
        style={styles.buttonContainer}
        onPress={handleSubmit(submit)}
        //disabled={invalid}
        >
          <Text 
            style={styles.btnLabel}> 
              Sign In 
          </Text>
      </TouchableOpacity>
    </View>
    </KeyboardAvoidingView>
  )
}

const LoginForm = reduxForm({
form: 'something',
validate
})(myFormCom);


const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#faf8ff',
},
logoContainer:{
flexGrow: 1,
alignItems: 'center',
marginTop: 80,
},
logo:{
height: 100
},
formContainer:{
marginBottom: 30
},
input:{
height: 40,
backgroundColor: '#faf8ff',
marginLeft: 20,
marginRight: 20,
paddingLeft: 10,
borderWidth: 2,
borderColor: '#9d81d0',
borderRadius: 5
},
inputlabel:{
marginLeft: 20,
fontSize: 16,
fontWeight: '500',
marginBottom: 4
},
buttonContainer:{
backgroundColor: '#704db2',
marginLeft: 20,
marginRight: 20,
alignItems: 'center',
borderRadius: 5,
marginTop: 15
},
btnLabel:{
fontSize: 20,
color: '#fff',
fontWeight: 'bold',
padding: 10,

},
errormessage: {
color: 'red',
marginLeft: 20,
fontSize:14
}
});

export default LoginForm;

Все, что я хочу, это то, что кнопка будет отключена, если произойдут некоторые ошибки, но мои ошибки не могут быть показаны, когда кнопка не нажата.Как так?может кто-нибудь объяснить мне?Извините, я не совсем хорошо реагирую на нативный и JavaScript;Я все еще изучаю свою вещь, ха-ха

Кстати, в myField я объявляю там, что это onChange в textInput, так что будет изменяться, если текст изменяется правильно?но почему моя ошибка появляется только когда я нажимаю кнопку входа?как мне правильно настроить эту штуку, чтобы показать ошибку, даже если кнопка еще не нажата.