如何为Form.Item验证动态设置所需的规则 [英] How to dynamically set a required rule to the Form.Item validation

问题描述

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

I have a list of parameters that may be checked or not. Its correspondent fields are enabled/disabled in dependence of checkbox state. So I want to enable and validate field if parameter is checked, and disable field and turn off validation rule while checkbox is unchecked. But I can't switch required rule to false while toggling checkbox.

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

As you see the registrations parameter is unchecked but the field still have a validation..

这是我的操作方式:

<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属性

attributes is an array of parameters that stores in component state. Checkbox handler just switch to opposite isActive property

可以帮忙吗?谢谢

推荐答案

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

validateFields() accepts two arguments. You should provide {force: true} as the second argument to validate the field properly.

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

validateFields 验证指定的字段并获取其值 和错误.如果不指定fieldNames的参数，则将 验证所有字段.

validateFields validates the specified fields and get their values and errors. If you don't specify the parameter of fieldNames, you will validate all fields.

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);

根据需要更改此代码.

这篇关于如何为Form.Item验证动态设置所需的规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！