CODEWITHSUNDEEP
reactjsantd
Janani
Janani

Reputation: 185

multiple form created in single js file. How to validate single form field validation on form submit in ant design?

Forms are using ant design.I have two forms in same .jsx file. When i click form submit it validate the both form fields. I don't want to validate both forms at a time.I want to validate single form at a time. For example,

export class form extends Component { 
    form1submit(e) {
       e.preventDefault();
      this.props.form.validateFields((err, values) => {
      console.log(values)
        if (!err) {
          alert("Form1 validated")
        }
      });
    }
    form2submit(e) {
       e.preventDefault();
      this.props.form.validateFields((err, values) => {
      console.log(values)
        if (!err) {
          alert("Form2 validated")
        }
      });
    }
    render(){
    return(
    <Form onSubmit={this.form1submit.bind(this)}>
        <FormItem label="Code">
                {getFieldDecorator('code', {rules: [{ required: true,
                 message: 'Please input product code!' }],})(
                  <Input />
                  )}
              </FormItem>
     <ButtonAnt type="primary" htmlType="submit">Save</ButtonAnt>
    </Form>
    <Form onSubmit={this.form2submit.bind(this)}>
        <FormItem label="Code">
                {getFieldDecorator('code', {rules: [{ required: true,
                 message: 'Please input product code!' }],})(
                  <Input />
                  )}
              </FormItem>
     <ButtonAnt type="primary" htmlType="submit">Save</ButtonAnt>
    </Form>
    )

    }
}

How to validate separate button form submit? If anyone has solution post

Upvotes: 3

Views: 7757

Answers (2)

Usman Khalid
Usman Khalid

Reputation: 61

You can manage multiple forms through specifying fields in validateFields/validateFieldsAndScroll like

this.props.form.validateFields(
  ["email", "firstName", "lastName"], // << validate these form fields only
  (err, values) => { // the rest remains the same...
    if (!err) {
      console.log(values);
    }
  }
);

Source: https://ant.design/components/form/#validateFields-return-sample

Update: From v4 on, validateFieldsAndScroll may be replaced to scrollToField.

Upvotes: 6

MBehtemam
MBehtemam

Reputation: 7919

the this.props.form is attached to parent of to forms in this case is form component so when you want to check validation two form is checked.

Solution 1

if the items of each form is different you could check the err to find which item of form is invalid 

 this.props.form.validateFields((err, values))

for example if you have item code in form1 but not in form2 and in err you find code you know form1 is invalid.

Solution 2

if items is not different between forms you could extract two forms in different components some thing like this : 

import Form1 from './Form1'
import Form2 from './Form2'

class FormParent extends React.Component {
    constructor(props){
        this.form1ValidateStatus = this.form1ValidateStatus.bind(this);
        this.form2ValidateStatus = this.form2ValidateStatus.bind(this);
        this.state = {form1Validation:false,form2Validation:false);
}
form1ValidateStatus(state){
    this.setState({form1Validation:state));
}

render(){

    return <div>
        <Form1 onChange={this.form1ValidateStatus}/>
        <Form2 onChange={this.form2ValidateStatus}/>
    </div>
   }
  }

now in in each form when something change first validate form then call this.props.onChange , forexample if in form1 some input change first validate form1 and then call this.props.onChange of form1 , if it's valid pass true and if it's invalid pass false . finally you know validation of each from from state.

Upvotes: 2

Related Questions