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

问题描述

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

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

我是这样做的:

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

你能帮忙吗?谢谢

解决方案

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

handleChangeAttributeActive = e =>{这个.setState(上一个状态 =>({...prevState,属性:{ ...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";类 App 扩展组件 {状态 = {属性: {name: "姓名",isActive: 真,事件 ID:1，attributeSendName: "输入你的名字"},isViewMode: 假};handleChangeAttributeActive = e =>{这个.setState(上一个状态 =>({...prevState,属性:{ ...prevState.attribute, isActive: e.target.checked }}),() =>{this.props.form.validateFields([e.target.value], { force: true });});};使成为() {const { getFieldDecorator } = this.props.form;const { 属性，isViewMode } = this.state;常量索引 = 0;返回 (<div className="应用程序"><行键={index} gutter={8}><Col span={6} offset={4}><Form.Item help=""><复选框选中={attribute.isActive}禁用={isViewMode}onChange={this.handleChangeAttributeActive}值={属性.名称}>{属性.名称}</复选框></Form.Item></Col><Col span={8}><Form.Item help="">{getFieldDecorator(`${attribute.name}`, {消息:attribute.attributeSendName，规则:[{ 必需:attribute.isActive }]})(<输入/>)}</Form.Item></Col></行>

);}}const WrappedApp = Form.create()(App);const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

根据您的需要更改此代码.

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.

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

Here is how I've done it:

<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 is an array of parameters that stores in component state. Checkbox handler just switch to opposite isActive property

Can you please help? Thank

解决方案

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

Change this code as per your need.

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