nzValidateStatus & nzHasFeedback overlap with nzSuffix

[Svetomechc]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-zahkan

Steps to reproduce

<form nz-form>
	<nz-form-item>
		<nz-form-label [nzSpan]="5">Password</nz-form-label>
		<nz-form-control [nzSpan]="12" nzValidateStatus="success" nzHasFeedback>
			<nz-input-group [nzSuffix]="suffixTemplate">
				<input
        [type]="passwordVisible ? 'text' : 'password'"
        nz-input
        placeholder="input password"
        [(ngModel)]="password"
      />
    </nz-input-group>
        </nz-form-control>
      </nz-form-item>
</form>

<ng-template #suffixTemplate>
      <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
</ng-template>

What is expected?

Icons are displayed next to each other

What is actually happening?

Icons overlap

Environment	Info
ng-zorro-antd	7.5.1
Browser	77.0.3824.6

---

P.S. Issue Helper can't handle "&" sign:

1. Issue title
   

2. Issue title after pressing "Create"
   

[vthinkxie]

Hi @Svetomechc
you can add the style below as temp solution, we will release the fix version in 8.0.0

form .has-feedback .ant-input-suffix i {
    margin-right: 18px;
}

[Svetomechc]

Thank you. I will wait for 8.0.0 (I already worked around this issue for now).

[Svetomechc]

Tried release candidate. I am really sorry to say that your fix is quite subpar because it adds a constant margin, no matter if there are two icons or one.

See demonstration:

1. This is OK
   

2. This is NOT
   

Previously icons would always stick to the right. But now second image looks like a regression from ng-zorro-antd 7.x.x.

[Svetomechc]

@vthinkxie, please reopen.

[Svetomechc]

Still the same.

[vthinkxie]

@Svetomechc
the fix version has not released yet

[Svetomechc]

@vthinkxie oh sorry, my bad.

[Svetomechc]

@vthinkxie By the way, thank you for all your hard work and patience. Much appreciated (:

[vthinkxie]

try this

form .has-feedback.has-success .ant-input-suffix i,
form .has-feedback.has-error .ant-input-suffix i,
form .has-feedback.is-validating .ant-input-suffix i{
    margin-right: 18px;
}

[Svetomechc]

@vthinkxie this still makes [nzSuffix] position a bit off.

1. With fix above
   

2. Should be
   

[vthinkxie]

https://stackblitz.com/edit/ng-zorro-antd-start-dgfg2j?file=src%2Fstyles.css
@Svetomechc

[Svetomechc]

Hmm, looks OK to me. Have to investigate why it doesn't work in my case. I will provide a repro link.

As a side note, I think [nzSuffix] should be displayed to the right of [nzHasFeedback] icon, not to the left.