在單個 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 。 最后你知道每個來自州的驗證。