Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to validate ant design formitems without using getFieldDecorator in reactjs?

In reactjs i am using ant design form. In that form i dont want default validation using getfielddecorator. I want to validate fields with my own validation.How it validate? For example

 <Form onSubmit={this.handlesubmit.bind(this)}>                                                                                                        <FormItem>                                                       
    <input/>                                              
</FormItem>
 <FormItem >                                                       
  <input/>                                                                                                                      
 </FormItem>                                                
<ButtonAnt className="btng" type="primary" htmlType="submit">Save</ButtonAnt>                                                   
 </Form>  
like image 905
Janani Avatar asked Dec 06 '17 07:12

Janani


People also ask

How do you display the first item by default in a dynamic ANTD form?

You have to click the "+ Add Field" button for the dynamic form to add and show the first field as shown here..

How do you validate a React form?

Form validation in React allows an error message to be displayed if the user has not correctly filled out the form with the expected type of input. There are several ways to validate forms in React; however, this shot will focus on creating a validator function with validation rules.

How do you use the getFieldDecorator in ANTD?

Just use Form. Item directly: // antd v3 const Demo = ({ form: { getFieldDecorator } }) => ( <Form> <Form. Item> {getFieldDecorator('username', { rules: [{ required: true }], })(<Input />)} </Form.

How do I clear an ANTD after submitting?

How do you delete values after submitting a form? The reset() method resets the values of all elements in a form (same as clicking the Reset button). Tip: Use the submit() method to submit the form.


1 Answers

I do it like this

<Form.Item
  help={HasError && meta.error}
  validateStatus={HasError ? "error" : "validating"}
>
  <Input {...input} {...props} className={classes.Input}></Input>
</Form.Item>
like image 76
NoreChase Avatar answered Oct 05 '22 12:10

NoreChase