ng-zorro input框使用错误提示nzErrorTip，当无错误时页面input框间隔距离产生变化

框架：angular8 + ng-zorro
问题：Form表单input框错误提示使用[nzValidateStatus] + [nzErrorTip] ，如下图vlanId使用
nzErrorTip进行错误提示，此时VlanId的margin-bottom会变小….

代码：

• html代码

 <nz-form-item>
       <nz-form-label [nzSpan]="6" nzRequired>VLAN ID</nz-form-label>
       <nz-form-control [nzSpan]="14" [nzValidateStatus]="error['vlanId'] && 'error'"  [nzErrorTip]="vlanIdMsg">
            <input *ngIf="modalData['type'] === 'new'" type="text" name="valnId" nz-input placeholder="支持数字、1-4096、1,2,3,4..." autocomplete="off" [(ngModel)]="vlanData.vlanId" (ngModelChange)="checkVlanId($event)">
             <span *ngIf="modalData['type'] !== 'new'">{{vlanData.vlanId}}</span>
        </nz-form-control>
</nz-form-item>
复制代码

• ts代码：

checkVlanId(event) {
        if (!event) {
            this.error['vlanId'] = true;
            this.vlanIdMsg = 'VLAN ID不能为空';
            return;
        }

        let regex = /^\d+$/;
        if (event.match(regex)) {
            this.disabledUnTag = false;
            if ( event < 1 || event > 4096) {
                this.error['vlanId'] = true;
                this.vlanIdMsg = 'VLAN ID范围为1-4096';
                return;
            }
            this.error['vlanId'] = false;
            this.vlanIdMsg = '';
            return;
        }

        if (event.indexOf('-') !== -1) {
            this.unTagDisabled();
            let arrIds = event.split('-');
            if ( arrIds.length === 2 && Number(arrIds[1]) > Number(arrIds[0])) {
                for (const item of arrIds) {
                  let  MatchNum =  this.isMatchNum(item, regex);
                  if (!MatchNum) {
                    return;
                  }
                }
                this.error['vlanId'] = false;
                this.vlanIdMsg = '';
                return;
            } else {
                this.error['vlanId'] = true;
                this.vlanIdMsg = 'VLAN ID支持数字、1-4096范围、1,2,3....';
                return;
            }
        }

        if (event.indexOf(',') !== -1) {
            this.unTagDisabled();
            let vlanIds = event.split(',');
            /*** error: 1,1,1... *****/
            if ((new Set(vlanIds)).size !== vlanIds.length) { // new Set集合元素不可重复
                this.error['vlanId'] = true;
                this.vlanIdMsg = 'VLAN ID不能重复';
                return;
            }
            for (let i = 0; i < vlanIds.length; i++) {
                const item = vlanIds[i];
                let  MatchNum =  this.isMatchNum(item, regex);
                if (!MatchNum) {
                  return;
                }
                this.error['vlanId'] = false;
                this.vlanIdMsg = '';
            }
        } else {
            this.disabledUnTag = false;
            this.error['vlanId'] = true;
            this.vlanIdMsg = 'VLAN ID支持数字、1-4096范围、1,2,3....';
            return;
        }
    }

    isMatchNum(item, regex) {
         /*** error: 1,hello,12... *****/
         if (!item.match(regex)) {
            this.error['vlanId'] = true;
            this.vlanIdMsg = 'VLAN ID支持数字、1-4096范围、1,2,3....' ;
            return false;
        }
        /***error: 0,4097... *****/
        if (item < 1 || item > 4096) {
            this.error['vlanId'] = true;
            this.vlanIdMsg = 'VLAN ID范围为1-4096';
            return false;
        }

        return true;
    }
复制代码

原因：

• 在进行vlanId校验时，如果error[‘vlanId’]为false时，即用户输入校验正确；
• 将vlanIdMsg置为了”, 即 this.vlanIdMsg = ”;
• vlanIdMsg错误提示为空字符串后，html会增加一个class=”.ant-form-item-with-help”,margin-bottom = 5px; 从而影响了页面展示；

解决：

• 删除this.vlanIdMsg = ”;

• 或this.vlanIdMsg = ‘无’;