浅谈angular4实际项目搭建总结(6)

//compontent
@ViewChild('xxx')
 xxx: ElementRef;

getXXX(){
  console.log(this.xxx)
}

//html
<div #xxx></div>

表单验证指令封装

ng提供表单验证 FormGroup 可以定义每个表单的验证条件，定义好之后，需要在表单下面写很多的ngIf dom来判断和展示当前表单的错误填写提醒，这样很不好的一点是提醒的文字是需要占位置的，在处理页面的时候需要兼容这些提醒文案，给他们做兼容布局（如果表单全部是独立的一排一排的还好，如果一行里有很多表单，每个表单的宽度可能也不一样，这时提醒文案就不好放了），而且每次写那么多条件和dom真的很麻烦。

写了一个指令组件，提醒文案作为弹出层展示出来，把当前表单的formControl对象传入指令，把所有的条件统一文案，比如说required 文案为‘'必填‘'。那需要做4件事情，1:动态为指令里加入组件（参考了官网核心知识->模板与绑定->动态组件），2:让组件绝对定位到表单右上角，需要用一个div包裹一下表单，并获取表单的宽度，把宽度传给组件，组件给提示框设置绝对定位。3:传入formControl对象，指令组件需要判断显示隐藏，4:统一文案，条件满足后给显示框展示对应文案，因为formControl的errors是一个对象，所以需要配置一个管道pipe来把errors转换为对应文案。

一个报错：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'false'.

我写的每一个指令都会有这个报错，一般报错在数据变化后触发，网上查了一下，说是没有使用 enableProdMode();方法就会触发这个报错，在main.ts中判断了环境，如果是开发环境的话就不使用enableProdMode();方法，所以目前开发环境会报错，但是也不影响逻辑，所以这个报错暂时忽略

formreset：

一个页面可能会有一个弹窗来填写表单，填写的时候有两种状态，编辑和新增，但是都是用的同一个弹窗对象，表单做了验证、错误条件达到并且dirty属性为true的时候，就会展示错误提醒。在新增和编辑切换的时候如果直接修改表单的值，dirty就会一直是true，就可能一直有错误提示。所以需要在一定情况下使用 formGroup 的 reset来重置表单，dirty就会是false了。每个表单自己也有reset方法。当使用formGroup重置表单的时候，textarea有可能并不会被重置，如果没有被重置，需要单独处理下textarea，给textarea的formControl对象单独reset一下。