Skip to content
Permalink
Browse files

touched

  • Loading branch information...
lfkwtz committed Oct 1, 2019
1 parent 5132804 commit 2a14569c6e251a74c8129c954b608825c5148b83
Showing with 26 additions and 7 deletions.
  1. +9 −2 demoApp/App.js
  2. +14 −4 demoApp/components/FormInput.js
  3. +3 −1 demoApp/validation/service.js
@@ -76,7 +76,7 @@ export default class App extends Component {

renderError(id) {
const {inputs} = this.state;
if (inputs[id].errorLabel && inputs[id].touched) {
if (inputs[id].errorLabel) {
return <Text style={styles.error}>{inputs[id].errorLabel}</Text>;
}
return null;
@@ -94,6 +94,7 @@ export default class App extends Component {
this.onInputChange({id: 'first_name', value});
}}
errorLabel={inputs.first_name.errorLabel}
touched={inputs.first_name.touched}
onLayout={({nativeEvent}) => {
this.setInputPosition({
ids: ['first_name'],
@@ -108,6 +109,7 @@ export default class App extends Component {
this.onInputChange({id: 'last_name', value});
}}
errorLabel={inputs.last_name.errorLabel}
touched={inputs.last_name.touched}
onLayout={({nativeEvent}) => {
this.setInputPosition({
ids: ['last_name'],
@@ -132,6 +134,7 @@ export default class App extends Component {
this.onInputChange({id: 'birthday_month', value});
}}
errorLabel={inputs.birthday_month.errorLabel}
touched={inputs.birthday_month.touched}
placeholder="Month"
keyboardType="number-pad"
/>
@@ -142,6 +145,7 @@ export default class App extends Component {
this.onInputChange({id: 'birthday_day', value});
}}
errorLabel={inputs.birthday_day.errorLabel}
touched={inputs.birthday_day.touched}
placeholder="Day"
keyboardType="number-pad"
/>
@@ -152,6 +156,7 @@ export default class App extends Component {
this.onInputChange({id: 'birthday_year', value});
}}
errorLabel={inputs.birthday_year.errorLabel}
touched={inputs.birthday_year.touched}
placeholder="Year"
keyboardType="number-pad"
/>
@@ -163,6 +168,7 @@ export default class App extends Component {
this.onInputChange({id: 'state', value});
}}
errorLabel={inputs.state.errorLabel}
touched={inputs.state.touched}
onLayout={({nativeEvent}) => {
this.setInputPosition({
ids: ['state'],
@@ -179,6 +185,7 @@ export default class App extends Component {
this.onInputChange({id: 'zip', value});
}}
errorLabel={inputs.zip.errorLabel}
touched={inputs.zip.touched}
onLayout={({nativeEvent}) => {
this.setInputPosition({
ids: ['zip'],
@@ -242,4 +249,4 @@ const styles = StyleSheet.create({
color: 'red',
fontSize: 12,
},
});
});
@@ -4,12 +4,16 @@ import {StyleSheet, Text, TextInput, View} from 'react-native';
export default class FormInput extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
touched: false,
};

this.onBlur = this.onBlur.bind(this);
}

renderError() {
const {errorLabel} = this.props;
if (errorLabel) {
const {errorLabel, touched} = this.props;
if (errorLabel && (touched || this.state.touched)) {
return (
<View>
<Text style={styles.error}>{errorLabel}</Text>
@@ -19,12 +23,18 @@ export default class FormInput extends Component {
return null;
}

onBlur() {
this.setState({
touched: true,
});
}

render() {
const {label} = this.props;
return (
<Fragment>
<Text>{label}</Text>
<TextInput style={styles.input} {...this.props} />
<TextInput style={styles.input} {...this.props} onBlur={this.onBlur} />
{this.renderError()}
</Fragment>
);
@@ -27,13 +27,14 @@ function onInputChange({id, value, cb = () => {}}) {
);
}

function getInputValidationState({input, value}) {
function getInputValidationState({input, value, touched}) {
return {
...input,
value,
errorLabel: input.optional
? null
: validateInput({type: input.type, value}),
touched: touched || input.touched,
};
}

@@ -63,6 +64,7 @@ function getFormValidation() {
updatedInputs[key] = getInputValidationState({
input,
value: input.value,
touched: true,
});
}

0 comments on commit 2a14569

Please sign in to comment.
You can’t perform that action at this time.