AngularJS 中文手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

AngularJS: API: ng/directive/input

input

  1. - directive in module ng

Angular数据绑定HTML输入元素控制。输入控制跟随HTML5的输入类型，并为旧的浏览器模拟(polyfills)HTML5验证行为。

指令信息

  • 这个指令执行优先级为0.

用法

  • 作为元素使用:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      [</span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-minlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-maxlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-pattern</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-change</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    ...

    </span><span style="box-sizing:border-box;color:navy;"></input></span></code>

参数

参数 类型 详述
ngModel string

声明用于数据绑定的Angular表达式。
name
(可选)
 string

发布到表单下的控件的属性名称。
required
(可选)
 string

如果未输入值就设置 required 验证错误键。
ngRequired
(可选)
 boolean

如果值为true则置为 required 属性
ngMinlength
(可选)
 number

如果值短于minlength则设置 minlength 验证错误键。
ngMaxlength
(可选)
 number

如果值长于maxlength则设置 maxlength 验证错误键。
ngPattern
(可选)
 string

如果值不匹配正则表达式则设置 pattern 验证错误键。 值可以是 /regexp/ 形式的内嵌正则表达式，或者是用 regexp 定义在scope中的表达式。
ngChange
(可选)
 string

Angular表达式，当输入元素通过用户交互方式发生输入变化时会执行这个表达式。

示例

index.html

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

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><script></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

   angular</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">module</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'inputExample'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[])</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

     </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'ExampleController'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'$scope'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Function</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">$scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">)</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

       $scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">user </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'guest'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> last</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'visitor'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">};</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

     </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">}]);</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;">

</script></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;">

<div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"ExampleController"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><form</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    User name: </span><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"text"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"userName"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"user.name"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.userName.$error.required"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      Required!</span><span style="box-sizing:border-box;color:navy;"></span><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    Last name: </span><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"text"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"lastName"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"user.last"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:teal;">ng-minlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"3"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-maxlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"10"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.lastName.$error.minlength"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      Too short!</span><span style="box-sizing:border-box;color:navy;"></span></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.lastName.$error.maxlength"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      Too long!</span><span style="box-sizing:border-box;color:navy;"></span><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></form></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><hr></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">user = {{user}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.userName.$valid = {{myForm.userName.$valid}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.userName.$error = {{myForm.userName.$error}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.lastName.$valid = {{myForm.lastName.$valid}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.lastName.$error = {{myForm.lastName.$error}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$valid = {{myForm.$valid}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$error.required = {{!!myForm.$error.required}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$error.minlength = {{!!myForm.$error.minlength}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</span><span style="box-sizing:border-box;color:navy;"></tt><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;">

</div></span></code>

protractor.js

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

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> user </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{{user}}'</span><span style="box-sizing: border-box;">));</span><span style="box-sizing: border-box;">

var</span><span style="box-sizing: border-box;"> userNameValid </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myForm.userName.$valid'</span><span style="box-sizing: border-box;">));</span><span style="box-sizing: border-box;">

var</span><span style="box-sizing: border-box;"> lastNameValid </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myForm.lastName.$valid'</span><span style="box-sizing: border-box;">));

</span><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> lastNameError </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myForm.lastName.$error'</span><span style="box-sizing: border-box;">));

</span><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> formValid </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myForm.$valid'</span><span style="box-sizing: border-box;">));

</span><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> userNameInput </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">model</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'user.name'</span><span style="box-sizing: border-box;">));</span><span style="box-sizing: border-box;">

var</span><span style="box-sizing: border-box;"> userLastInput </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">model</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'user.last'</span><span style="box-sizing: border-box;">));</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should initialize to model'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">user</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{"name":"guest","last":"visitor"}'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">userNameValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'true'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">formValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'true'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be invalid if empty when required'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  userNameInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  userNameInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">''</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

 

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">user</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{"last":"visitor"}'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">userNameValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">formValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be valid if empty when min length is set'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">''</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

 

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">user</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{"name":"guest","last":""}'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">lastNameValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'true'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">formValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'true'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be invalid if less than required min length'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'xx'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

 

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">user</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{"name":"guest"}'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">lastNameValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">lastNameError</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'minlength'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">formValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be invalid if longer than max length'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  userLastInput</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'some ridiculously long name'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

 

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">user</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{"name":"guest"}'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">lastNameValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">lastNameError</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'maxlength'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">formValid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span></code>

上一篇：ng/directive/form下一篇：ng/directive/input[checkbox]