博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular 表单操作
阅读量:5858 次
发布时间:2019-06-19

本文共 1720 字,大约阅读时间需要 5 分钟。

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

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

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

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

@Component({  selector: 'app-loop-back',  template: `        

{

{box.value}}

`})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

待续。。。。

 

转载于:https://www.cnblogs.com/wlxll/p/7988884.html

你可能感兴趣的文章
js兼容性大全
查看>>
晶振不起振的原因及其解决方法
查看>>
学习目标
查看>>
《利用python进行数据分析》学习笔记--数据聚合与分组(groupby)
查看>>
C++中的函数指针模板
查看>>
2015年个人总结
查看>>
C#编程(六)------------枚举
查看>>
高性能 Windows Socket 组件 HP-Socket v2.3.1-beta-2 发布
查看>>
ZOJ 3316 Game 一般图最大匹配带花树
查看>>
《系统架构师》——操作系统和硬件基础
查看>>
如何看待一本图书
查看>>
angularjs1-7,供应商
查看>>
oracle参数列表
查看>>
Wordpress3.2去除url中的category(不用插件实现)
查看>>
The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine-Excel2003
查看>>
macOS Sierra 代码显示未来 Mac 将搭载 ARM 芯片
查看>>
《Arduino家居安全系统构建实战》——1.3 部署安全系统的先决条件
查看>>
Linux 中如何通过命令行访问 Dropbox
查看>>
《jQuery移动开发》—— 1.3 小结
查看>>
使用 Flutter 反序列化 JSON 的一些选项
查看>>