我在我的应用程序中使用tcomb-form-native创建登录页面。一切正常。 我想添加一个细节:当输入为空时,我希望表单处于“错误”配置。 我的意思是,当用户访问页面时,我希望所有字段都显示为红色,并显示错误消息。现在,仅在用户单击“登录”后才显示错误。 我是react-native的新手,我真的不知道可以在代码中的哪里添加它。 感谢您的帮助!
我的一种形式,例如:
import React,{ Component } from "react";
import { View,StyleSheet,Text,ImageBackground } from "react-native";
import styles from "../../assets/Styles/Styles";
import i18n from "../../src/i18n";
import Button from "react-native-flat-button";
import t from "tcomb-form-native";
const Form = t.form.Form;
const User = t.struct({
email: t.String,username: t.maybe(t.String),password: t.String,terms: t.Boolean
});
const formStyles = {
...Form.stylesheet,formGroup: {
normal: {
marginBottom: 10
}
},controlLabel: {
normal: {
color: "#6C6363",fontSize: 18,marginBottom: 7,fontWeight: "600"
},// the style applied when a validation error occours
error: {
color: "red",fontWeight: "600"
}
}
};
const options = {
fields: {
email: {
error:
"Without an email address how are you going to reset your password when you forget it?"
},password: {
error:
"Choose something you use on a dozen other sites or something you won't remember"
}
},stylesheet: formStyles
};
export default class Login extends Component {
handleSubmit = () => {
const value = this._form.getvalue();
console.log("value: ",value);
};
storeToken(responseData){
AsyncStorage.setItem(accESS_TOKEN,responseData,(err)=> {
if(err){
console.log("an error");
throw err;
}
console.log("success");
}).catch((err)=> {
console.log("error is: " + err);
});
}
async onLoginpressed() {
this.setState({showProgress: true})
try {
let response = await fetch('https://www.weecoop.org/api/clients?[ {user_id} ]&[ {mail} ]&[ {access_token} ]',{
method: 'POST',headers: {
'accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
session:{
email: this.state.email,password: this.state.password,}
})
});
let res = await response.text();
if (response.status >= 200 && response.status < 300) {
//Handle success
let accessToken = res;
console.log(accessToken);
//On success we will store the access_token in the AsyncStorage
this.storeToken(accessToken);
this.redirect('home');
} else {
//Handle error
let error = res;
throw error;
}
} catch(error) {
this.setState({error: error});
console.log("error " + error);
this.setState({showProgress: false});
}
}
render() {
return (
<ImageBackground
source={require("../../assets/images/bg_mobile_paysage.jpg")}
style={{ flex: 1 }}
>
<View style={styles.container}>
<Form ref={c => (this._form = c)} type={User} options={options} />
<Button
type="custom"
containerStyle={styles.mybtnContainer}
style={styles.mybtn}
onPress={this.handleSubmit}
>
{" "}
Sign up test{" "}
</Button>
<Button
onPress={() => this.props.navigation.navigate("TabBar")}
containerStyle={styles.mybtnContainer}
style={styles.mybtn}
>
{i18n.t("login.action.connect").toUpperCase()}
</Button>
<Text>{"\n"}</Text>
<Text style={styles.h5}>
{"\n"}
{i18n.t("login.action.choice")}
</Text>
<Button
type="custom"
onPress={() => this.props.navigation.navigate("Signup")}
containerStyle={[styles.mybtnContainer,styles.btnContainerMuted]}
style={styles.mybtn}
>
{i18n.t("login.action.createaccount").toUpperCase()}
</Button>
</View>
</ImageBackground>
);
}
}