Angular学习采坑小结（一）

1.在表单中添加非表单控制的元素

首先ng-zorro的表单结构是

通过angular的FormGroup创建好表单后，在input标签中加入formControlName属性，一般和FormGroup创建好的各个属性名称一样。假设设置的表单名是demoForm，这之后只需要使用this.demoForm.controls[‘formControlName中的属性名’].value来获取input中的值。
但是有的时候input默认的type（比如radio，checkbox）样式可能达不到界面显示的效果（就是可能太丑了），需要使用其他的第三方组件来代替它，这时候不用formControlName来获取其中的值会获得一个报错

意思是在form表单域中推荐使用formControlName来定义属性，（但是第三方组件直接加formControlName又获取不到里面的值，郁闷…）然后报错下面也给出了解决方法，加一个[ngModelOptions]=“{standalone：true}”，意思是把这个组件独立出去，不用表单控制，这时候就只有两点不方便，一来不能直接用表单内置的方法获取数据，二来也不能用reset（）来重置这一块表单域的数据，需要自己写一个初始化方法。

2.表单input使用双向绑定更新延迟的问题

在input中使用ngModel来双向绑定数据更新时遇到的问题，当时项目的状况是做一个数据更新的操作，点击按钮后弹出更新对话框，按钮的click事件函数如下：

我当时将传入的data放到了Component的属性updateObj中，然后又把updateObj的各个属性双向绑定到了表单的input中，在点击对话框中的保存后重置对话框的表单并从数据库获取更新后的数据，这时候再点击弹出按钮，会发现表单里面不再是更新后的数据而是全空，需要点击表格中其他的数据再回来点击一次弹出按钮才会在对话框表单里出现更新后的数据。这里我想的是可能ngmodel的监听有关，可能得去看看源码做一下调查才能知道原因。
这里先说一下解决方法：
就是不要用ngmodel去双向绑定，使用form的setValue方法去设置input的值，具体代码如下：

hasOwnProperty用来判断是否有这个属性，其实和后面的data[key]判断重复了，但是我保险起见两个都写了，因为少些一个条件好像会出问题（尴尬0.0）

3.表单验证updateValueAndValidity中不填onlySelf导致验证无法通过

一般的表单验证，在提交函数里会这么去做一个判断（脏值检测和更新数据）

就是对表单的每一条数据判断是否通过了validator（同步校验+异步校验）
这两步中如果updateValueAndValidity中不填写onlySelf：true会导致验证不通过，此时Form.valid为false，但是输入的数据又是符合验证的，通过各种尝试，发现了异步校验就需要在updateValueAndValidity中加入onlySelf：true这个属性，具体原因看了updateValueAndValidity的源码也不是很懂，源码对onlySelf的解释是默认为false，false的时候检验完这一项（formControl）后并且该项的_parent属性存在，则会去对它的父组件（formGroup）执行一次updateValueAndValidity这个函数。问题应该是出在对父组件执行校验上，在onlySelf为true时则只校验自身。好家伙我直接好家伙。附上angular的源码：