CODEWITHSUNDEEP
reactjsvalidationantd
jayanes
jayanes

Reputation: 634

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>

Upvotes: 3

Views: 15137

Answers (1)

Vincro
Vincro

Reputation: 248

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.

Upvotes: 1

Related Questions