如何为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屋!