仅在应用程序中上传了文件时,我才努力添加某些字段的验证,我已经实现了自定义验证,但是输入仅包含一条错误消息,但是我无法添加输入,验证看起来像蚂蚁设计提供。
在我的自定义验证中,我仅实现了一条错误消息。
如果存在估算文件,这是需要验证的形式:
<StyledSelectInput
showSearch
placeholder="Select a builder"
optionFilterProp="children"
onChange={this.setSelectValue('builder')}
filterOption={this.selectFilterOptions}
>
{builderOptions}
</StyledSelectInput>
{this.state.missingBuilder && <ValidationMessage>Please input a builder!</ValidationMessage>}
</Col>
</Row>
<Row>
<Col>
<StyledSelectInput
showSearch
placeholder="Select a community"
optionFilterProp="children"
onChange={this.setSelectValue('community')}
filterOption={this.selectFilterOptions}
>
{communityOptions}
</StyledSelectInput>
{this.state.missingCommunity && <ValidationMessage>Please input a community!</ValidationMessage>}
</Col>
</Row>
<Dragger multiple={false}
accept=".csv"
onChange={this.handleUploadChange}
customRequest={this.processCSV}
onRemove={this.removeFile}
fileList={this.state.fileList}
>
<p className="ant-upload-drag-icon">
<Icon type="upload" />
</p>
<p className="ant-upload-text">Click to upload or drag a .csv file to this area to upload </p>
</Dragger>
And these are the functions for the custom validation:
handleSubmit = (e) => {
e.preventDefault();
if (this.state.csvUploaded) {
const {builder, community} = this.state;
const nextState = {};
if (!builder) nextState.missingBuilder = true;
if (!community) nextState.missingCommunity = true;
if (isEmpty(nextState)) {
let homesPayload = this.state.homesPayload;
homesPayload = homesPayload.map((home) => {
home.builderId = builder;
home.communityId = community;
return home;
});
return this.store({homes: homesPayload});
}
return this.setState(nextState);
}
this.props.form.validateFields((err, values) => {
const payload = {
home: values
};
if (!err) {
this.setState({loading: true});
this.store(payload)
}
});
};
setSelectValue = (type) => {
return (value) => {
const nextState = { [type]: value };
if (type === 'builder')
nextState.missingBuilder = false;
if (type === 'community')
nextState.missingCommunity = false;
this.setState(nextState)
}
};
我希望验证看起来像蚂蚁设计验证