如果语句为真,则验证字段

时间:2019-01-10 09:41:03

标签: react-redux ant-design-pro

仅在应用程序中上传了文件时,我才努力添加某些字段的验证,我已经实现了自定义验证,但是输入仅包含一条错误消息,但是我无法添加输入,验证看起来像蚂蚁设计提供。

在我的自定义验证中,我仅实现了一条错误消息。

如果存在估算文件,这是需要验证的形式:

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

我希望验证看起来像蚂蚁设计验证

0 个答案:

没有答案