antd form表單一行多個(gè)組件并對其校驗(yàn)

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

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

一行一個(gè)標(biāo)簽對應(yīng)多個(gè)輸入組件，這個(gè)需求很常見但在官方例子沒看到合適的，因?yàn)楣俜浇ㄗh：

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

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


        
            
                {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再包一層，這樣校驗(yàn)位置也正確，簡直不要太爽。效果如圖：

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

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

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

相關(guān)文章

antd form表單一行多個(gè)組件并對其校驗(yàn)

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

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

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

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

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

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

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

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

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

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