如何为 Form.Item 验证动态设置所需的规则

Posted 2023-03-07

【中文标题】如何为 Form.Item 验证动态设置所需的规则

【英文标题】：How to dynamically set a required rule to the Form.Item validation

【发布时间】：2020-03-09 00:45:22

【问题描述】：

我有一个可以检查或不检查的参数列表。其对应字段根据复选框状态启用/禁用。因此，如果选中了参数，我想启用和验证字段，并在未选中复选框时禁用字段并关闭验证规则。 但是在切换复选框时，我无法将 required 规则切换到 false。

如您所见，registrations 参数未选中，但该字段仍有验证..

这是我的做法：

<Row key=index gutter=8>
  <Col span=6 offset=4>
    <Form.Item help="">
      <Checkbox
        checked=attribute.isActive
        disabled=isViewMode
        onChange=this.handleChangeAttributeActive(attribute.eventId)
        value=attribute.name
      >
        attribute.name
      </Checkbox>
    </Form.Item>
  </Col>
  <Col span=8>
    <Form.Item help="">
      getFieldDecorator(`$attribute.name`, 
        initialValue: attribute.attributeSendName,
        rules: [ required: attribute.isActive ],
      )(
        <Input
          disabled=isViewMode || !attribute.isActive
        />
      )
    </Form.Item>
  </Col>
</Row>

attributes 是存储在组件状态中的参数数组。 复选框处理程序只需切换到相反的isActive 属性

你能帮忙吗？谢谢

【参考方案1】：

validateFields() 接受两个参数。您应该提供 force: true 作为第二个参数以正确验证该字段。

handleChangeAttributeActive = e => 
    this.setState(
      prevState => (
        ...prevState,
        attribute:  ...prevState.attribute, isActive: e.target.checked 
      ),
      () => 
        this.props.form.validateFields([e.target.value],  force: true );
      
    );
  ;

validateFields 验证指定字段并获取它们的值 和错误。如果不指定 fieldNames 的参数，则会 验证所有字段。

import  Row, Col, Checkbox, Form, Input  from "antd";

class App extends Component 
  state = 
    attribute: 
      name: "name",
      isActive: true,
      eventId: 1,
      attributeSendName: "enter your name"
    ,
    isViewMode: false
  ;

  handleChangeAttributeActive = e => 
    this.setState(
      prevState => (
        ...prevState,
        attribute:  ...prevState.attribute, isActive: e.target.checked 
      ),
      () => 
        this.props.form.validateFields([e.target.value],  force: true );
      
    );
  ;

  render() 
    const  getFieldDecorator  = this.props.form;
    const  attribute, isViewMode  = this.state;
    const index = 0;
    return (
      <div className="App">
        <Row key=index gutter=8>
          <Col span=6 offset=4>
            <Form.Item help="">
              <Checkbox
                checked=attribute.isActive
                disabled=isViewMode
                onChange=this.handleChangeAttributeActive
                value=attribute.name
              >
                attribute.name
              </Checkbox>
            </Form.Item>
          </Col>
          <Col span=8>
            <Form.Item help="">
              getFieldDecorator(`$attribute.name`, 
                message: attribute.attributeSendName,
                rules: [ required: attribute.isActive ]
              )(<Input />)
            </Form.Item>
          </Col>
        </Row>
      </div>
    );
  


const WrappedApp = Form.create()(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<WrappedApp />, rootElement);

根据需要更改此代码。