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

Question

表单使用蚂蚁设计。我在同一个 .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 ，例如，如果在 form1 中某些输入更改首先验证 form1 然后调用 form1 的this.props.onChange ，如果它是有效的传递true并且它是无效的传递false 。 最后你知道每个来自州的验证。