标签:外观 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 |
待续。。。。
标签:外观 tor dirty 隐藏 inpu value export com 结构
原文地址:http://www.cnblogs.com/wlxll/p/7988884.html