1、在自己写的anular组件中可以使用[(x)]的语法,可以分属性x还有时间xChange,详见官方文档-模板语法-双向数据绑定
2、在原生html元素不能使用[(x)]语法,但是angular提供了ngModel指令来实现了某些表单元素的双向绑定
3、关于自定义表单组件
对于前面两种的理解:只要使用了ngModel,就会隐式创建formControl
关于自定义表单组件:有angular已经实现值访问器的angular表单,也可以有自定义组件的angular表单,如果是自定义组件表单,组件就需要实现ControlValueAccessor
什么是ControlValueAccessor:它是原生元素和Angular表单之间的桥梁,将组件或者指令继承ControlValueAccessor的接口就能变成Angular表单使用了。
理解:https://blog.csdn.net/fen747042796/article/details/78880409
使用:
https://segmentfault.com/a/1190000009070500#articleHeader1
https://segmentfault.com/a/1190000012726935
https://www.jianshu.com/p/727ddad21586
实现ControlValueAccessor重写三个方法:
writeValue(obj: any):该方法用于将模型中的新值写入视图或 DOM 属性中。也就是formcontrol的值变化后,会执行这个方法。
registerOnChange(fn: any):设置当控件接收到 change 事件后,调用的函数。fn为传入的一个改变formcontrol值的方法,把它传递给该自定义组件,在组件值变化时,调用这个changeFn(当然,registerOnChange作用就是要把fn引用赋值保存下来,便于组件使用)。其实打debugger可以看到,这里的fn是forms的setUpViewChangePipeline方法。
registerOnChange(fn: any) { this .changeFn = fn; }
registerOnTouched(fn: any):设置当控件接收到 touched 事件后,调用的函数。同上,只不过传入的fn不一样。