在单个 js 文件中创建的多个表单。如何在 ant design 中验证表单提交的单个表单字段验证？

Question

表单使用 ant design。我在同一个 .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"], // << validate these form fields only
  (err, values) => { // the rest remains the same...
    if (!err) {
      console.log(values);
    }
  }
);

来源：https://ant.design/components/form/#validateFields-return-sample

---

更新：从 v4 开始，validateFieldsAndScroll 可能被替换为 scrollToField。

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，例如，如果在表单 1 中某些输入更改首先验证表单 1，然后调用表单 1 的 this.props.onChange，如果它是有效的，则通过 true 并且如果它是无效的通过false 。最后你知道每个状态的验证。