Question

表单正在使用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>
    )

    }
}

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

Answer 1

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

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

    }
})

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

Answer 2

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。最后你知道来自州的每一个的验证。

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

2 个答案: