从零开始跟着文档学习angular表单

表单简介

打开了angular1.5.9的form文档开始一行行了解下angular表单的东西吧

暂时跳过的部分用这个字体表示, 以便查漏补缺

写作时查看的文档地址

form行为

  • form这个directive是提供api的, 提供了方法和属性.
  • 如果form有name这个属性, form的api会挂在当前scope的这个字段下(后面会有例子).
  • form有个别名是ng-form, 作用是浏览器不允许嵌套form的, 用别名可以嵌套了, 嵌套场景可能是有父子关系的input组？

form会被加上一些class, 尝试:
代码中

1
<form></form>

编译后变为了

1
<form class="ng-pristine ng-valid"></form>

也就是angular的form永远会存在一些(2+个)状态class, 这很方便, 并且ngAmimate可以自动对这些class进行动画, 这些class为:

ng-valid is set if the form is valid.
ng-invalid is set if the form is invalid.
ng-pending is set if the form is pending.
ng-pristine is set if the form is pristine.
ng-dirty is set if the form is dirty.
ng-submitted is set if the form was submitted.

因为angular的适用场景是SPA, 所以form的提交默认被阻止, 除非form上存在action属性.
所以form的提交行为就交给ng-click处理吧, 或者使用form上的ng-submit来指定提交动作以后执行的方法.(提交动作就是触发普通form提交的行为: 点击botton和点击type为submit的input）
重要: 为防止重复提交,ng-click与ng-submit只能使用一种.(不是一个, 是一种)
ng-click执行会在ng-model更新前触发, 所以尽量使用ng-submit

form状态改变导致的class改变都可以和ngAnimate配合的, css大概是这样的(在form上加了个my-form的class来区分不同地方的动画):

1
2
3
4
5
6
7
8
9
10
//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-form {
  transition:0.5s linear all;
  background: white;
}
.my-form.ng-invalid {
  background: red;
  color:white;
}

实测

（万万没想到文档竟然这么短.）
文档已经教我们如何拿到form的状态了, 写个简单的form来看一下form的状态如何吧:)

html代码: 

1
2
3
4
5
6
7
8
<form ng-submit='submit()' name='form'>
	<input type="text" required ng-model='a'>
	<input type="text" ng-minlength=5 ng-model='b'>
	<input type="number" min=5 ng-model='c'>
	<input type="date" ng-min='123' ng-model='d'>
	<button>submit</button>
</form>
<span>{{form}}</span>

我把所有input都弄成错的状态了, 以下是form的class情况和页面上打出的结果.

1
<form ng-submit="submit()" name="form" class="ng-dirty ng-valid-parse ng-invalid ng-invalid-minlength ng-valid-number ng-invalid-min ng-invalid-required ng-valid-date"></form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
{
    "$error": {
        "minlength": [
            {
                "$viewValue": "test",
                "$validators": {},
                "$asyncValidators": {},
                "$parsers": [],
                "$formatters": [
                    null
                ],
                "$viewChangeListeners": [],
                "$untouched": false,
                "$touched": true,
                "$pristine": false,
                "$dirty": true,
                "$valid": false,
                "$invalid": true,
                "$error": {
                    "minlength": true
                },
                "$name": "",
                "$options": null
            }
        ],
        "min": [
            {
                "$viewValue": "2",
                "$validators": {},
                "$asyncValidators": {},
                "$parsers": [
                    null,
                    null
                ],
                "$formatters": [
                    null
                ],
                "$viewChangeListeners": [],
                "$untouched": false,
                "$touched": true,
                "$pristine": false,
                "$dirty": true,
                "$valid": false,
                "$invalid": true,
                "$error": {
                    "min": true
                },
                "$name": "",
                "$options": null
            }
        ],
        "required": [
            {
                "$viewValue": "",
                "$validators": {},
                "$asyncValidators": {},
                "$parsers": [],
                "$formatters": [
                    null
                ],
                "$viewChangeListeners": [],
                "$untouched": false,
                "$touched": true,
                "$pristine": false,
                "$dirty": true,
                "$valid": false,
                "$invalid": true,
                "$error": {
                    "required": true
                },
                "$name": "",
                "$options": null
            }
        ]
    },
    "$name": "form",
    "$dirty": true,
    "$pristine": false,
    "$valid": false,
    "$invalid": true,
    "$submitted": false
}

我猜想一般使用的话只要全局给个ng-invalid的样式就可以实时置红invalid的form,各个地方写验证很麻烦吧.
不允许提交也很简单: 

1
<button ng-disabled='form.$invalid'>submit</button>

细节

  • input的validator一定要配合ng-model食用, 否则无效.
  • ng-required效果等于required, 以此推测pattern也是如此.
  • 其实每个input需要去看各自的文档.
  • 事实证明, 不去disablebutton的话angular也阻止函数执行的. disable只是样式问题.