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

ymyang 發布于2019-08-02 11:52 / 1390人閱讀

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

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

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

經過摸索，證實這樣寫是可行的，如下：


        
            
                {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云服務器 form表單校驗多個form提交表單校驗 form表單插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53181.html

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

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

Miyang 2019-08-23 12:38 評論0 收藏0
JSON生成Form表單

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

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

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

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

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

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

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

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