2***@qq.com
2***@qq.com
  • 发布:2019-08-02 14:37
  • 更新:2019-10-18 15:56
  • 阅读:4267

uni-app form表单提交后,怎么清空表单数据??不通过按钮点击触发reset函数

分类:uni-app
2019-08-02 14:37 负责人:无 分享
已邀请:
成熟的稻穗

成熟的稻穗 - csdds.cn

提交成功回调执行清空的方法不行吗?

  • 2***@qq.com (作者)

    执行那个formreset方法 不触发呀

    2019-08-02 14:48

  • 成熟的稻穗

    回复 2***@qq.com: 检查是不是this指向问题 你没贴代码。。没办法帮你分析

    2019-08-02 14:57

2***@qq.com

2***@qq.com (作者)

<form @submit="formSubmit"  @reset="formReset">  
                    <view>  
                        <view class="uni-title">姓名</view>  
                        <view class="uni-list">  
                            <view class="uni-list-cell">  
                                <input class="uni-input" name="nickname" placeholder="请填写您的昵称"  />  
                            </view>  
                        </view>  
                    </view>  
                    <view>  
                        <view class="uni-title">电话</view>  
                        <view class="uni-list">  
                            <view class="uni-list-cell">  
                                <input class="uni-input" name="phonr" placeholder="请填写您的电话" />  
                            </view>  
                        </view>  
                    </view>  
                    <view>  
                        <view class="uni-title">标题</view>  
                        <view class="uni-list">  
                            <view class="uni-list-cell">  
                                <input class="uni-input" name="title" placeholder="请填写您的标题" />  
                            </view>  
                        </view>  
                    </view>  
                    <view>  
                        <view class="uni-title">内容</view>  
                        <view class="uni-list">  
                            <view class="uni-list-cell">  
                                <input class="uni-input" name="content" placeholder="请填写您的内容" />  
                            </view>  
                        </view>  
                    </view>  
                    <view class="uni-btn-v uni-common-mt">  
                        <button class="btn-submit" form-type="submit"  type="primary">Submit</button>  
                    </view>  
                </form>  

formSubmit: function(res) {  
                console.log(res)  
                var _self = this;  
                var formdata = res.detail.value;  
                //定义表单规则  
                var rule = [{  
                        name: "nickname",  
                        checkType: "string",  
                        checkRule: "1,3",  
                        errorMsg: "姓名应为1-3个字符"  
                    },  
                ];  
                //进行表单检查  
                var formData = res.detail.value;  
                var checkRes = graceChecker.check(formData, rule);  
                if (checkRes) {  
                    //进行表单检查 验证通过 进行网络判断  
                    uni.getNetworkType({  
                        success: function(res) {  
                            let status = res.networkType;  
                            if (status == "4g" || status == "wifi") {  
                                uni.showToast({  
                                    title: status + '准备提交',  
                                    duration: 2000  
                                });  
                                _self.formReset()  
                            } else {  
                                uni.showToast({  
                                    title: status + '保存本地,稍等会提交',  
                                    duration: 2000  
                                });  
                                uni.setStorage({  
                                    key: 'formInfo',  
                                    data: formdata,  
                                    success: function(res) {  
                                        console.log(res);  
                                    }  
                                });  
                            }  
                        }  
                    });  

                } else {  
                    uni.showToast({  
                        title: graceChecker.error,  
                        icon: "none"  
                    });  
                }  
            },  
            formReset: function(e) {  
                console.log(e)  
                this.chosen = ''  
            }
成熟的稻穗

成熟的稻穗 - csdds.cn

<view class="uni-padding-wrap uni-common-mt">
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
<view class="title">switch</view>
<view>
<switch name="switch" />
</view>
</view>
<view class="uni-btn-v">
<button formType="submit" ref="testBtn">Submit</button>
</view>
</form>
</view>

formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
this.$refs.testBtn.$dispatch('Form', 'uni-form-reset', {
type: 'reset'
})
}

  • hsy

    this.$refs.testBtn.$dispatch is not a function 改成您的代码后报这个错,请问是为什么呢

    2019-10-10 14:55

成熟的稻穗

成熟的稻穗 - csdds.cn

<view class="uni-padding-wrap uni-common-mt">  
    <form @submit="formSubmit">  
        <view class="uni-form-item uni-column">  
            <view class="title">switch</view>  
                <input type="text">  
                    <view>  
                        <switch name="switch" />  
                    </view>  
            </view>  
            <view class="uni-btn-v">  
                <button formType="submit" ref="testBtn">Submit</button>  
            </view>  
    </form>  
</view>  

formSubmit: function(e) {  
     console.log('form发生了submit事件,携带数据为:'+JSON.stringify(e.detail.value))  
     this.$refs.testBtn.$dispatch('Form', 'uni-form-reset', {  
        type: 'reset'  
    })  
 }

该问题目前已经被锁定, 无法添加新回复