angular 表单操作

最新推荐文章于 2022-05-11 00:55:11 发布

weixin_33733810

最新推荐文章于 2022-05-11 00:55:11 发布

阅读量199

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wlxll/p/7988884.html

版权

　　一直没有使用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

待续。。。。

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