How to validate select option using ant design

I created a select option using ant design. Inside the option, three values are hardcoded and one is Input field functionality work fine but when I created a rule for validations not working (when we select hardcoded options validation work but select Input validation not work).

Here my onchange functions for select and Input

 handleChange(value) {
    console.log(`selected ${value}`);
     this.setState({
         bank:value,
     });
}

 onChangeBank(event){
    this.setState({
        bank:event.target.value
    });
}

Here me select form

 <FormItem {...formItemLayout} label="Bank" >
              {getFieldDecorator('bank',{ rules: [{ required: true, message: 'Please provide bank name!' }]}
              )(
                  <Select
                      showSearch
                      style={{ width: 400 }}
                      placeholder="Select a Bank"
                      optionFilterProp="children"
                      onChange={this.handleChange.bind(this)}

                  >
                     <option value="Bank1">Bank1</option>
                      <option value=" Bank2"> Bank2</option>
                      <option value=" Bank3"> Bank3</option>
                      <option value={this.state.bank}> <Input style={{border:'none',height:30}} type="text" placeholder="Type here" onChange={this.onChangeBank.bind(this)}/></option>
                  </Select>              )}</FormItem>

1 answer

  • answered 2018-07-11 17:09 Vincro

    Because you are overriding the default onChange event, you need to manually set the fields value on your onChange handler.

    This should be done in addition to your call to setState, as this.state will not be read by the form.

    In effect, you will want to add (assuming you have form as a prop):

    this.props.form.setFieldsValue({bank: event.target.value})
    

    I hope this helps.