AngularJS重置表单 ng-dirty

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
      <form name="ctrl.myForm">
        <div><label for="email">Email</label>
        <input name="myInput" type="email" ng-model="ctrl.email" id="email" required></div>
        <div><label for="password">Password</label>
        <input name="myPassword" type="password" minlength="8" ng-model="ctrl.password" id="password" required></div>
        <div>
        <button ng-click="ctrl.reset()" type="button">Reset</button>
        </div>
      </form>
angular.module(‘myApp‘, [])
    .controller(‘myCtrl‘, myCtrl);  
function myCtrl(){    var vm = this;
    vm.reset = function(){
        vm.myForm.$setPristine();
        vm.myForm.$setUntouched();
        vm.email = vm.password = ‘‘;
  }
}

表单input区域必须放在 form

参考连接:Angular clear subform data and reset validation

时间: 2024-10-29 19:12:07

AngularJS重置表单 ng-dirty的相关文章

AngularJS实现表单手动验证和表单自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"

angularJS 过滤器 表单验证

过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)Date(3)Filter子串匹配用来处理一个数组,可以过滤出含有某个子串的元素,作为一个字数组来返回.通常用来过滤需要展示的元素.可以是字符串数字,对象或是一个用来从数组中选择元素的函数.字符串:返回所有包含这个字符串的元素对象:将待过滤对象的属性同这个对象中的同名属性进行对比,如果属性值是字符串就

【AngularJs】---表单验证

1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令 ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长度验证

基于angularJS的表单验证练习

今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa"> <form novalidate name="loginForm"> <div> <label>用户名</label> <input type="text" name="nText"

重置表单和提交表单中遇到的小问题

function hidden_edit(){ //隐藏编辑店员 $(".form-horizontal")[0].reset(); //重置的表单中 name值必须和数据库的name值相对应,在按返回键时,才能重置表单内容,如果某一项name的不能重置,那就说明数据库中没有此项name值 $(".y-edit").css("display","none"); $(".y-clerk").css("

HTML&amp;CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me

JQuery使用reset重置表单

本文章主要介绍了使用jQuery重置(reset)表单的方法,需要的朋友可以参考下 原文地址: http://www.hpboys.com/820.html 由于JQuery中,提交表单是像下面这样的: $('#yigeform').reset(); 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,兴冲冲的查看了JQuery文档,JQuery中并没有reset方法! 那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法. 如下,因为Fo

重置按钮小tip—为何不能重置表单数据呢

刚开始学html的同志有时候可能会遇到一个问题,就是为什么在编辑页面里面的重置按钮总是不起作用呢不清空数据呢?接下来就说明一下原因. Reset 对象 Reset 对象代表 HTML 表单中的一个重置按钮. 在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建. 当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值.默认值由 HTML value 属性或 JavaScript 的 defaultVa

$(&#39;#itemAddForm&#39;).form(&#39;reset&#39;);重置表单是报错?

$('#itemAddForm').form('reset');重置表单是报错Uncaught TypeError: $(...).reset is not a function 以为是方法错误于是就换了$('#itemAddForm').reset()和$('#itemAddForm').resetForm()依然报错. 后来把重置按钮的type属性换成了submit就OK了,<input type="sbumit" onclick="clearForm()"