如何在 React Native 中验证动态表单？

Question

So, at first, i initialize empty state for required count ( if users gives input as 5 and submit i will be initialize the empty state with 5 state ),

Then by using this, i am looping to create dynamic form ( am using map ), now how to validate the form !

My initial state formation :

state = {usersDetails: []};

componentDidMount(){
    this.setInitialRow()
}

setInitialRows(){
        const seats = this.props.selectedSeats;
        let newRow = [];
        for(let i=0;i<seats.length;i+=1){
            newRow.push(
                {"seatName": seats[i].name,
                "passenger": [{
                    "name":"",
                    "gender": "",
                    }]
                })
        }
        this.setState({usersDetails: newRow})
    }

So from the above, i got my states and by using this am looping by this way:

 {this.state.usersDetails.map((s, i) =>{

             <TextInput 
                    style={{ borderBottomWidth: 1, borderColor: '#f0eff4', height: 40 }}
                    placeholder="Enter Name"
                    onChangeText={(text) => this.handleNameChange(text,i)}
             />

             <TextInput 
                    style={{ borderBottomWidth: 1, borderColor: '#f0eff4', height: 40 }}
                    placeholder="Enter Age"
                    onChangeText={(text) => this.handleAgeChange(text,i)}
             />
}

So , as per this i will be getting 5 pairs of above! Now how to validate the input fields on each pair ?

I tried this :

handleSubmit(){

        let row = this.state.usersDetails;

        function isNameEmpty(r){
            return r["passenger"][0].name === ''
        }
        function isAgeZero(r){
            return r["passenger"][0].age == 0
        }
       
        let isNameFail = row.find(isNameEmpty)
        let isAgeFail = row.find(isAgeZero)

        if(isNameFail || isAgeFail){
            // ToastAndroid.show('Please fill the Passenger Details',0.2)
        }else{
            console.log(row);
        }
    }

From this function, am getting toast warning ! But, how to display error message under the respective textInputs ?

Answer 1

This might help just to have an idea of how this will be done

class App extends Component {
  
  componentDidMount() {
    this.getDynamicInputs();
  }

  state = { userDetails: [], item_views: [], errorViews: [] };

  updateState = (index, value) => {
    const userDetails = [...this.state.userDetails]; //make a copy of array
    userDetails[index] = value;
    this.setState({ userDetails: userDetails });
  };

  getDynamicInputs() {
    const inputData = [];
    const errorViews = [];  
    for (let i = 0; i < count; i++) {
      inputData.push(
       <>
        <TextInput
          key={i}
          style={{ borderBottomWidth: 1, borderColor: "#f0eff4", height: 40 }}
          placeholder="Enter Name"
          onChangeText={(val) => this.updateState(i, val)}
          value={this.state.userDetails[i]}
        />
        { this.state.errorViews[i] && this.state.errorViews[i].error ? <Text>Required Field</Text> : null}
      </>
      );
      errorViews.push( { error: false } );
    }
    this.setState({ item_views: inputData, errorViews: errorViews });
  }

  validate(){

   const errorViews = _.clone(this.state.errorViews); 

   for (let i = 0; i < count; i++) {    
     if( this.state.userDetails[i] === “” ){
       errorViews[i].error = true;
     }
   }
   this.setState({errorViews});
  }

  render() {
    console.log(this.state.userDetails);
    return <View style={styles.app}>
            {this.state.item_views}
           <Button onPress={() => this.validate()}>Validate</Button>    
          </View>;
  }
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    backgroundColor: "pink"
  }
});

export default App;