[AngularJS] Angular 1.3 $submitted for Form in Angular

AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event is trggered.

<!DOCTYPE html>

<html>

<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

  <title>What's new in Angular 1.3</title>

</head>

<body ng-app="app" ng-controller="MainCtrl as vm">

  <h1>Angular {{vm.angularVersion}}</h1>

  <h2>Demo</h2>

  <form name="myForm" novalidate>

    <label>

      Some input:

      <input

             type="time"

             name="myField"

             ng-model="vm.inputValue"

             ng-model-options="vm.modelOptions"

             required />

    </label>

    <button type="submit">Submit</button>

  </form>

  Bound value: <span ng-bind="vm.inputValue"></span> <br />

  Field Error State: <pre>{{myForm.myField.$error | json}}</pre> <br />

  Form Error State: <pre>{{myForm.$error | json}}</pre>

  myForm.$submitted: {{myForm.$submitted}}

</body>

</html>

var app = angular.module('app', []);

app.controller('MainCtrl', function MainCtrl() {

  'use strict';

  var vm = this;

  vm.angularVersion = angular.version.full;

  vm.modelOptions = {

    timezone: 'UTC'

  };

});

Form Error State:

{

  "required": [

    {

      "$viewValue": "",

      "$validators": {},

      "$asyncValidators": {},

      "$parsers": [

        null,

        null

      ],

      "$formatters": [

        null

      ],

      "$viewChangeListeners": [],

      "$untouched": true,

      "$touched": false,

      "$pristine": true,

      "$dirty": false,

      "$valid": false,

      "$invalid": true,

      "$error": {

        "required": true

      },

      "$name": "myField",

      "$options": {

        "timezone": "UTC",

        "updateOnDefault": true

      }

    }

  ]

}

myForm.$submitted: false

ReadMore http://jsbin.com/?html,css,js,output

[AngularJS] Angular 1.3 $submitted for Form in Angular的更多相关文章

angularJs上传文件（非form上传）
angular.js:13920 Broken interceptor detected: Config object not supplied in rejection: <input typ ...
[Angular 2] A Simple Form in Angular 2
When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGr ...
从Java角度理解Angular之入门篇：npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
(转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
Angular 个人深究（一）【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
angular&period;module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
angularjs 动态表单, 原生事件中调用angular方法
1. 原生事件中调用angular方法, 比如 input的onChange事件想调用angular里面定义的方法 - onChange="angular.element(this).sco ...
angularJs , json，html片段，bootstrap timepicker angular
css .demotest { width: %; height: auto; overflow: auto; position: relative; margin: auto; margin-top ...

随机推荐

title与alt的区别
html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的, ...
Windows与Linux主机之间的连接和交互工具
1.Putty 远程连接Linux主机 Windows主机上安装putty,工具打开后显示如下: 输入要连接的Linux主机的IP地址,点击Load,连接主机后输入用户名密码,即可登录Linux主机 ...
Indexof
注释:indexOf() 方法对大小写敏感! 注释:如果要检索的字符串值没有出现,则该方法返回 -1. 实例在本例中,我们将在 "Hello world!" 字符串内进行不同的检 ...
jQuery滚动监听插件Waypoints
页面内滚动操作的导航插件Waypoints.它可以让你方便的处理页面滚动事件,你可以比较*的在自己的UI中使用这个插件控制页面滚动事件. Waypoints根据用户滚动的位置来帮助开发者构建相关的设 ...
&dollar;rootScope
参考地址 https://docs.angularjs.org/api/ng/type/$rootScope.Scope angular 的scope一般上都是有继承关系的,也就是说可以通过原型访问到 ...
java udp 发送小数数字（较难）
代码全部来自:http://825635381.iteye.com/blog/2046882,在这里非常感谢了,我运行测试了下,非常正确,谢谢啊服务端程序: package udpServer; i ...
【算法系列学习】[kuangbin带你飞]专题十二基础DP1 G - 免费馅饼
https://vjudge.net/contest/68966#problem/G 正解一: http://www.clanfei.com/2012/04/646.html #include< ...
SVN更新失败，提示locked 怎么破
有时在svn更新或提交代码时,会报错,让你cleanup 如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...
C&num;净化版WebApi框架
前言我们都知道WebApi是依赖于Asp.Net MVC的HttpRouteCollection进行路由 . 但WebApi和MVC之间是没有依赖关系的, WebApi的基类ApiControlle ...
thinkphp 迁移数据库 -Phinx 简单说明文档
php think migrate migrate:create Create a new migration ///创建 migrate:rollback Rollback the last or ...