码迷,mamicode.com
首页 > 其他好文 > 详细

angular 表单操作

时间:2017-12-05 20:04:15      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:外观   tor   dirty   隐藏   inpu   value   export   com   结构   

  一直没有使用angular的表单验证以及表单提交数据。只是用的input绑定值,另外最近的设计都是点击后显示错误,而不是自动显示错误。所以错误显示一直也没有做。而表单的非法验证可以直接解决这个问题。angular 5最近更新的跟表单验证有关。导致我想研究下angular的表单操作。把web移动端的表单验证添加上。而我的随笔基本都写我不熟悉,我熟悉的,感觉舒适的都不会写。

  通过keyup事件,获取用户输入。所有标准DOM事件对象都有一个target属性,引用触发该事件的元素。event.target.value返回该元素的当前内容。可以用event.key获取按键本身。

  传入$event是靠不住的做法。典型化事件对象揭露了重要的一点,即反对把整个DOM事件传到方法中,因为这样组件会知道太多模板的信息。只有当它知道更多它本不应该了解的HTML实现细节时,它才能提取信息。这就违反了模板(用户看到的)和组件(应用如何处理用户数据)之间的分离关注原则。

  从一个模板引用变量中获得用户输入。在标识符前加上井号#就能声明一个模板引用变量。这些变量提供了从模板中直接访问元素的能力。除非绑定了一个事件,否则这将无法工作。只有在应用做了些异步事件(如击键),angular才更新绑定(并最终影响到屏幕)。

@Component({
  selector: ‘app-loop-back‘,
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

  上例代码将keyup事件绑定到了数字0,这是可能是最短的模板语句。虽然这个语句不做声明,但它满足angular的要求,所以Angular将更新屏幕。从模板变量获得输入框比通过$event对象更加简单。这个方法最漂亮得一点是:组件代码从视图中获得了干净的数据值。再也不用了解$event变量及其结构了。

  按键事件过滤(通过key.enter)。keyup事件处理器监听每一次按键。有时我们只需要在意回车键。因为它标志用户结束输入。解决这个问题得一种方法是检查每个$event.keyCode,只有键值是回车键时才采取行动。更简单的方法是:绑定angular的keyup.enter模拟事件。然后,只有当用户敲回车键时,Angular才会调用事件处理器。可以应用在用户登录位置。

  也可以使用失去焦点事件(blur)更新用户输入的值。

  这些技术对于小规模演示很实用,但是在处理大量用户输入时,很容易变得累赘和笨拙。要在数据录入字段和模型属性之间传递数据,双向数据绑定是更加优雅和简洁的方式。

  如果某个组件、指令或者管道是属于imports中所导入的某个模块的,那就不必要再把它声明到本模块的declarations数组中。在模板驱动表单中,只要导入了FormsModule就不用对<form>做任何改动来使用FormsModule.

  Angular会在<form>标签上自动创建并附加一个NgForm指令。NgForm指令为form增补了一些额外特性。它会控制那些带有ngModel指令和name属性的元素,监听他们得属性(包括其有效性)。它还有自己得valid属性,这个属性只有在属性全部有效时才会是真。

  在表单中使用ngModel可以获得比仅使用双向数据绑定更多的控制权。它还会告诉我们很多信息:用户碰过此控件吗?它得值变化了吗?数据变得无效了吗?ngModel指令不仅仅跟踪状态。它还使用特定的angular css类来更新控件,以反映当前状态。可以利用这些CSS类来修改控件的外观,显示或隐藏消息。

状态 true,className false.className
控件被访问过 ng-touched ng-untouched
控件值变化了  ng-dirty ng-pristine
控件的值有效   ng-valid ng-invalid

待续。。。。

 

angular 表单操作

标签:外观   tor   dirty   隐藏   inpu   value   export   com   结构   

原文地址:http://www.cnblogs.com/wlxll/p/7988884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!