在单个js文件中创建的多个表单。如何验证蚂蚁设计中表单提交的单一表单字段验证?

时间:2017-12-01 13:29:01

标签: reactjs antd

表单正在使用ant设计。我在同一个.jsx文件中有两个表单。当我点击表单提交时,它会验证两个表单字段。我不想一次验证两个表单。我想一次验证单个表单。 例如,

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>
    )

    }
}

如何验证单独的按钮表单提交?如果有人有解决方案帖子

2 个答案:

答案 0 :(得分:2)

您可以通过在validateFields / validateFieldsAndScroll中指定字段来管理多个表单,例如

this.props.form.validateFields(['email', 'firstName', 'lastName'], (err, values) => {
    if (!err) {

    }
})

https://ant.design/components/form/#validateFields/validateFieldsAndScroll

答案 1 :(得分:1)

this.props.form附加到表单的父级,在这种情况下是form组件,因此当您要检查验证时,会检查两个表单。

解决方案1 ​​

如果每个表单的项目不同,您可以查看err以查找哪个表单无效

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

例如,如果您在form1中有项code但在form2中没有,err中找到code,则表示您知道form1无效。

解决方案2

如果表单之间的项目没有差异,您可以在不同的组件中提取两个表单,如下所示:

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>
   }
  }

现在以每种形式更改首次验证表单然后调用this.props.onChange,例如,如果在form1中某些输入更改首先验证form1然后调用form1的this.props.onChange,如果它有效传递true,如果传递无效false。最后你知道来自州的每一个的验证。