angular——表单控件

发表于

什么是angular表单控件？

  • angular增强了常见的表单控件（如 url email date number），为其增加了一些默认的检测行为。比如input type为email类型时，输入的值不带有@符会默认为错误格式。

    几个常见的表单指令

  1. required 同ng-required 必填项
  2. ng-maxlength 控制字符最大长度
  3. ng-minlength 控制字符最小长度

  4. ng-pattern 传入正则，控制输入
    5.ng-trim:false 不去除首尾空格 (url email data number都有内置正则匹配)

    几个常见的表单属性

    刚才介绍的表单指令需要绑定在表单元素上，由事件触发。在触发时，他们会改变与其对应的表单属性。这些属性可以用在诸如ng-show这样的指令上。

    1. $pristine 文本框未发生任何变化时为true。
    1
    2
    3
    4
    5
    6
    7
     //注意取得相应表单属性需要表单控件有name属性
    <form name="myForm">
    	<input type="text" name="myText" />
    	<div ng-show="myForm.myText.$pristine" class='alert alert-danger'>
        	请输入
        </div>
    </form>
    1. $dirty 文本框发生变化时的属性
    2. $invalid 验证失败时为true的属性
    3. $valid 验证成功时为true的属性
    4. $error 是一个对象，存储前面几个表单指令验证失败对应的属性。例：required项没填，则’表单name’.’组件name’.$error.required==true.
      -同样的还有$error.maxlength $error.minlength $error.pattern $error.trim

表单属性对应的样式

$pristine $dirty $valid $invalid都有对应的样式ng-pristine ng-dirty ng-valid ng-invalid样式，当相应的属性被触发发生改变，对应的样式也会被触发

再次提醒表单元素的属性都保存在 ‘表单name’.’组件name’下