nzHasFeedback can not show icon correct when nz-form-control has a nz-form-extra

YuanPan commented 6 years ago

Version

1.1.0

Environment

Mac OS 10.13.5 Chrome 67.0.3396.87 ng-zorro 1.1.0

Reproduction link

https://ng-zorro-antd-start-8kb3fa.stackblitz.io

Steps to reproduce

1、build a nz-form-item. 2、add nzHasFeedback on nz-form-control 3、add a nz-form-extra inside nz-form-control 4、type something in the input， then you will see the feedback icon is in the wrong place.

What is expected?

the nzHasFeedback icon shoud show at then end of the input

What is actually happening?

the nzHasFeedback icon shoud show net line

Other?

xiehongyang commented 6 years ago

I am not use nz-form-extra, but nzHasFeedback icon also doesn't show in the right place。。

xiehongyang commented 6 years ago

finally, I find the reason, I am using ng-alain, and it's form component write like this:

      <nz-input-group nzSize="large" nzAddonBeforeIcon="anticon anticon-user">
        <input nz-input formControlName="mail" placeholder="邮箱">
      </nz-input-group>
      <ng-container *ngIf="mail.dirty && mail.errors">
        <nz-form-explain *ngIf="mail.errors?.required">请输入邮箱地址！</nz-form-explain>
        <nz-form-explain *ngIf="mail.errors?.email">邮箱地址格式错误！</nz-form-explain>
      </ng-container>
    </nz-form-control>

and when I add nzHasFeedback in the <nz-form-control>, I can't find the icon or the icon is not in the right place,I don't know why,maybe it's a bug, and finally, I change to the doc style in ng-zorro, it worked!, the doc style like this:

<nz-form-control>
      <nz-input-group nzSize="large" nzAddonBeforeIcon="anticon anticon-user">
        <input nz-input formControlName="mail" placeholder="邮箱">
      </nz-input-group>
      <nz-form-explain *ngIf="mail.errors?.required">请输入邮箱地址！</nz-form-explain>
      <nz-form-explain *ngIf="mail.errors?.email">邮箱地址格式错误！</nz-form-explain>
    </nz-form-control>

you see, the ng-conainer really influence the nzHasFeedback, so after removing it, everything will be expected

vthinkxie commented 6 years ago

https://codepen.io/vthinkxie/pen/YOOoXO?editors=0010 same with antd react version

vthinkxie commented 5 years ago

closed as ant-design won't fix this. https://github.com/ant-design/ant-design/issues/12266

NG-ZORRO / ng-zorro-antd