angularjs表单重置错误

2024-07-04

我正在尝试使用 angularjs 制作一个带有验证的表单,到目前为止我做得很好。但是,当我提交重置按钮时,除了从验证部分收到的错误消息之外,所有字段都会重置。当我重置表单时,如何删除所有字段和错误消息。

这就是我按下重置按钮时的情况

这是我的代码

<div class="page-header"><center><h2>Give us your Feedback</h2></center></div>

    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
            <label>Name*</label>
            <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block">
                <font color="#009ACD">You name is required.</font>
            </p>
        </div>

         <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
            <label>Email</label>
            <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">
                <font color="#009ACD">Enter a valid email.</font>
            </p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
            <label>Description</label>
            <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
            <font color="white">
                <p ng-show="userForm.username.$error.minlength" class="help-block">
                    <font color="#009ACD">Description is too short.</font>
                </p>
                <p ng-show="userForm.username.$error.maxlength" class="help-block">
                    <font color="#009ACD">Description is too long.</font>
                </p>
            </font>
        </div>

        <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
                type="reset"
                ng-click="reset()" padding-top="true"
            >
                Reset
            </button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
                ng-click="submit()"
                padding-top="true"
            >
                Submit
            </button>
        </div>

    </form>
</div>

我的控制器

.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {
    $scope.showfeedback = function() {
        $state.go('app.sfeedback');
    };

    $scope.submitForm = function(isValid) {
        $scope.submitted = true;

        // check to make sure the form is completely valid
        if (!isValid) {
            var alertPopup = $ionicPopup.alert({
                title: 'Invalid data entered!',
            });
        } else {
            var alertPopup = $ionicPopup.alert({
                title: 'Feedback submitted',
            });
        }
    };

    $scope.reset = function() {
        var original = $scope.user;
        $scope.user= angular.copy(original)
        $scope.userForm.$setPristine()
    };
})

var original = $scope.user;

重置时:

$scope.user= angular.copy(original);
$scope.userForm.$setPristine();

remove

type='reset' in  <button>

这是角度文档 https://docs.angularjs.org/api/ng/type/form.FormController对于表单控制器。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularjs表单重置错误 的相关文章

  • jquery 解决方案从静态 html 页面发布到另一个站点

    需要将数据从静态 html 页面发布到托管在另一个域上的另一个页面 通常 我会使用 post 方法创建一个包含表单的 iframe 其操作定向到该网页 最后提交该表单 复杂之处在于我要从静态 html 页面收集数据并在 iframe 内创建
  • php curl 获取 html 和 js 渲染

    php curl 只获取html页面的源代码 不执行js脚本 我需要我的网站获取已执行所有 JavaScript 的源代码 我使用ajax 但无法在页面中添加更多js 因为当我加载另一个页面时脚本会保留 我找到了 SpiderMonkey
  • 如果未选中所有复选框,则禁用按钮;如果选中至少一个复选框,则启用该按钮

    我有一个表格 每行都有一个复选框 下面有一个按钮 如果至少选中一个复选框 我想禁用该按钮 tbody tr td td tr tbody
  • 使用 GruntJs 缩小脚本

    我有几个 js 文件 我似乎可以让 GruntJs 正确地连接 缩小它们 如果我单独做每一个 它们就会工作得很好 如果我单独组合然后尝试缩小组合文件 它也不起作用 Here is the error 有想法该怎么解决这个吗 或者也许是什么原
  • 我应该担心 JavaScript 支持吗?

    我开发了一个支持ajax 的网站 然而 该网站目前无法在没有 JavaScript 的情况下运行 该网站在我测试过的任何浏览器以及 iPhone 诺基亚手机上都运行良好 但是 我还应该担心 javascript 支持吗 我知道有一些技术可以
  • Node-Webkit在不同窗口启动功能

    我的 node webkit 应用程序由一个控制窗口和一个演示窗口组成 控制窗口收集数据并最终通过window open功能 演示文稿窗口现在可以访问global多变的 现在我想通过创建 SVG 元素等来呈现该信息的图形表示 我已经有一个
  • 发送抓取请求以获取 torrent 的种子和同级

    我一直在尝试创建一个 torrent 网站 但我遇到了以下问题 如何发送 torrent 抓取请求以获取其播种者和水蛭 我有一个 PHP 类函数 它为我提供公告列表 public function getTrackers Load trac
  • 如何在引导程序使用jquery中单击另一个链接时更改活动类?

    我有一个 html 作为侧边栏 并使用Bootstrap ul class nav nav list li class active a href Link 1 a li li a href link2 Link 2 a li li a h
  • for循环中的appendChild只添加1个孩子

    在 JavaScript 中 我使用 HTML 表格创建一个网格 您在 Photoshop 中看到的网格类型 网格大小是可变的 即可以由用户更改 因此必须计算每个网格方块的大小并将其除以可用像素数以获得精确大小的网格 我已经完成了所有这些
  • AJAX 调用后使用 jquery 刷新 DOM

    我正在做一个新项目http www hotwirerevealed com http www hotwirerevealed com它显示 识别 hotwire com 上的酒店 输入状态和目的地后 我有一个 javascript 函数 它
  • 有没有可靠的方法在 IE11 中使用 ctx.drawImage() ?

    我有一个脚本 可以根据数据查询创建动态 SVG 图形 我需要将它们粘贴到 PDF 中 为此我使用 jsPDF 不幸的是 jsPDF 自己的 addSVG 似乎不起作用 所以我花了一些时间尝试使用画布将 SVG 转换为 PNG 我似乎可以将
  • 你可以有一个自定义触发器来更新 Angular 中的 ng-model 字段吗?

    Angular 有许多选项可用于根据输入字段中的事件延迟模型更新
  • sails-mongo 适配器,标准化错误消息

    我正在使用 sails mongo 适配器尝试 sailsJs 和 mongodb 将验证添加到模型后 当验证失败时 我会收到以下响应 Users js 模型 module exports schema true attributes na
  • 使用 RaphaelJS 确定图像何时加载到 svg 中

    我正在尝试弄清楚如何确定 svg 图像何时加载到浏览器中 我正在使用 Raphael JS 并且我已经尝试过 var image paper image path 0 0 10 10 image node addEventListener
  • Twitter 引导工具提示说明不起作用?

    我注意到我的 Twitter 引导工具提示不尊重data position 所以 我前往Twitter Bootstrap 工具提示演示 http twitter github com bootstrap javascript html t
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 如何获取对象类型

    在我的 Google Apps 脚本应用程序中 我看到以下错误 脚本已完成 但返回值不是受支持的返回类型 如何找出我返回的值的类型 我试过 typeof obj 但我得到的只是它是一个对象 仅当缓存为空并且从电子表格加载数据时才会发生此错误
  • 使页脚正确粘贴到页面底部[重复]

    这个问题在这里已经有答案了 我试图让我的页脚 只是一个带有一行文本的div 位于屏幕底部 如果内容没有一直到达底部 或者位于内容的底部 如果内容需要滚动条 如果内容不需要滚动条 它可以完美工作 但是当内容太长时 页脚仍然位于同一位置 位于内
  • JavaScript 开发人员不使用 Array.push() 是否有原因?

    我经常看到开发人员在 JavaScript 中使用如下所示的表达式 arr arr arr length Something arr arr length Another thing 不会push更合适吗 arr arr push Some
  • JS:在调用文件中的每个其他函数之前调用某个函数

    我有一个关于在 JS 中更好地重用代码的问题 例如我有文件functions js具有以下功能 export const a gt export const b gt export const c gt const foo gt 我想在调用

随机推荐