表单正在使用ant设计。我在同一个.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>
)
}
}
如何验证单独的按钮表单提交?如果有人有解决方案帖子
答案 0 :(得分:2)
您可以通过在validateFields / validateFieldsAndScroll中指定字段来管理多个表单,例如
this.props.form.validateFields(['email', 'firstName', 'lastName'], (err, values) => {
if (!err) {
}
})
https://ant.design/components/form/#validateFields/validateFieldsAndScroll
答案 1 :(得分:1)
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
。最后你知道来自州的每一个的验证。