angular 4 在表单验证时，如果触发错误验证，有时排版顺序会被打乱 解决办法

原因：

这个问题是因为在显示错误提示信息时，使用了*ngIf来控制提示信息的显示。由于*ngIf不占用空间，页面生成时没有给错误提示提供显示的空间，当错误提示被触发显示之后，挤占之前的元素需要的空间，排版就会被打乱。

解决办法：

使用[ngStyle]="{'visibility': 条件判断语句? 'visible':'hidden'}"来控制错误提示信息的显示。因为 visibility 会一直占据自己的空间，当条件判断语句结果为true时，visibility 的值为visible，条件语句显示；条件为false时，值为hidden，条件语句不显示。

 

代码实例：

html ：

<div [ngStyle]="{'visibility':isRequired(ctrl)? 'visible':'hidden'}">
        <span [ngStyle]="{'visibility': formGroup.get(ctrl).invalid && formGroup.get(ctrl).touched? 'visible':'hidden'}"
              class="help-block"> {{formGroup.hasError('data', ctrl)? formGroup.getError('data', ctrl): formConfig[ctrl][3]['error']?  formConfig[ctrl][3]['error']: formConfig[ctrl][3]['label']+'为必填项' }}</span>

</div>

ts：

this.formConfig = Object.assign({}, {
    id: [, , ,
        {
            'section': 'base',
            hidden: true
        }],
    assetsId: [, , ,
        {
            label: '资产ID',
            'section': 'base',
            readonly: true,
            // hidden: true,
            type: 'text'
        }],
    name: [, Validators.required, ,
        {
            label: '资产名称',
            'section': 'base',
            type: 'text'
        }],
});
this.formGroup = new FormBuilder().group(this.formConfig);