antd form表單一行多個組件并對其校驗

Miyang 發(fā)布于2019-08-23 12:38 / 2328人閱讀

摘要：一行一個標(biāo)簽對應(yīng)多個輸入組件，這個需求很常見但在官方例子沒看到合適的，因為官方建議注意一個建議只放一個被裝飾過的，當(dāng)有多個被裝飾過的時，無法自動生成。

一行一個標(biāo)簽對應(yīng)多個輸入組件，這個需求很常見但在官方例子沒看到合適的，因為官方建議：

注意：一個 Form.Item 建議只放一個被 getFieldDecorator 裝飾過的 child，當(dāng)有多個被裝飾過的 child 時，help required validateStatus 無法自動生成。

經(jīng)過摸索，證實這樣寫是可行的，如下：


        
            
                {this.props.form.getFieldDecorator("shareholderName2", {
                    rules: [{ required: true, message: "請輸入股東名稱" }],
                })()}
            
            
                
                    {this.props.form.getFieldDecorator("shareholderRate2", {
                        rules: [{
                            required: true,
                            // tslint:disable-next-line:max-line-length
                            pattern: /(^[1-9][0-9](.d)?$)|(^[1-9](.d)?$)|(^0.d$)/,
                            message: "請輸入正確的持股比例",
                        }],
                    })()}

方法就是用antd的柵格布局來控制排列，在后面的輸入組件用FormItem再包一層，這樣校驗位置也正確，簡直不要太爽。效果如圖：

GPU云服務(wù)器云服務(wù)器 form表單校驗多個form提交表單校驗 form表單插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/98885.html

相關(guān)文章

antd form表單一行多個組件并對其校驗

摘要：一行一個標(biāo)簽對應(yīng)多個輸入組件，這個需求很常見但在官方例子沒看到合適的，因為官方建議注意一個建議只放一個被裝飾過的，當(dāng)有多個被裝飾過的時，無法自動生成。一行一個標(biāo)簽對應(yīng)多個輸入組件，這個需求很常見但在官方例子沒看到合適的，因為官方建議：注意：一個 Form.Item 建議只放一個被 getFieldDecorator 裝飾過的 child，當(dāng)有多個被裝飾過的 child 時，help...

ymyang 2019-08-02 11:52 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點是：可以快速構(gòu)建出一個表單表單的數(shù)據(jù)、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節(jié)約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節(jié)的生成表單四 container表單組件在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...

Half 2019-08-23 13:39 評論0 收藏0
antd多表單提交實例

摘要：場景下有三個，每個下是一個表單，點擊不同下的提交按鈕只能驗證當(dāng)前提交其值，進行相關(guān)操作問題判斷校驗結(jié)果就是對整個頁面的進行判斷，并不能夠?qū)蝹€校驗結(jié)果做判斷。場景： Tabs下有三個TabPane，每個TabPane下是一個form表單，點擊不同form下的提交按鈕只能驗證當(dāng)前form.item,提交其value值，進行相關(guān)操作問題： this.props.form.va...

miqt 2019-08-23 18:28 評論0 收藏0
antd源碼解析（一）Form組件解析

摘要：引言看過源碼的都知道，其實是在一組組件的基礎(chǔ)上進行了一層封裝，本文主要解讀組件的基礎(chǔ)組件，另外會略過模式下的代碼。解讀源碼首先要從自己最常用的或者感興趣的入手，首先組件最主要的還是在這個裝飾器入手。引言看過antd源碼的都知道，antd其實是在一組react-componment組件的基礎(chǔ)上進行了一層ui封裝，本文主要解讀antd組件Form的基礎(chǔ)組件react-componmen...

timger 2019-08-22 16:27 評論0 收藏0