Framework: Angular8 + ng-Zorro Issues: The Form input box displays an error message using [nzValidateStatus] + [nzErrorTip], as shown in the following figure. VlanId displays an error message using nzErrorTip. In this case, the margin-bottom of vlanId becomes smaller….

Code:

  • The HTML code
<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=" placeholder" autocomplete="off" [(ngModel)]="vlanData.vlanId" (ngModelChange)="checkVlanId($event)"> <span *ngIf="modalData['type'] ! == 'new'">{{vlanData.vlanId}}</span> </nz-form-control> </nz-form-item>Copy the code
  • Ts code:
checkVlanId(event) { if (! event) { this.error['vlanId'] = true; This. vlanIdMsg = 'VLAN ID cannot be empty '; return; } let regex = /^\d+$/; if (event.match(regex)) { this.disabledUnTag = false; if ( event < 1 || event > 4096) { this.error['vlanId'] = true; This. vlanIdMsg = 'VLAN ID range 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 Number, range 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 ! This. error['vlanId'] = true; This. vlanIdMsg = 'The VLAN ID cannot be repeated '; 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 Number, range 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 Number, range 1-4096, 1,2,3.... '; return false; 7} / * * * error: 0409... *****/ if (item < 1 || item > 4096) { this.error['vlanId'] = true; This. vlanIdMsg = 'VLAN ID range 1-4096'; return false; } return true; }Copy the code

The reason:

  • If error[‘vlanId’] is false, the vlanId is correct.
  • Set vlanIdMsg to ”, i.e. This. vlanIdMsg = ”;
  • Class =”. Ant-form-item-with-help “,margin-bottom = 5px; Thus affecting the page display;

Solution:

  • Delete this.vlanIdMsg = “;

  • This. vlanIdMsg = ‘none ‘;