hope please add forms validate for touched

[lait233]

What problem does this feature solve?

建议forms组件新增validateControl.touched 的验证方式 这样可以在用户输入完内容失去焦点后再提示错误信息 某些情况下这样的做法比较友好 另外建议在input失去焦点之后就提示错误信息



Suggested that forms a component of new validateControl. Touched validation method that may lose focus on the user input the content after the prompt error message in some cases this friendly advice other will prompt error message after input loses focus

What does the proposed API look like?

目前我把 nz-form-control.component.ts 的第62行改成这样

      if (this.validateControl.dirty || this.validateControl.touched) { 

然后把login模块里面的html使用touched

<nz-form-explain *ngIf="validateForm.get('userName').touched && validateForm.get('userName').errors">Please input your username!</nz-form-explain>

在用户点击submit的时候使用this.validateForm.controls[ i ].markAsTouched();
这样似乎已经接近我的需求,但是input的在失去焦点的时候边框的颜色没有变成红色,提示信息也没有改变颜色(后来发现是因为提示的上级div没有has-error这个class,但是我不知道怎么样完成它)

Now I put the nz-form-control.com ponent. Ts line 62 to this

If (this. ValidateControl. Dirty | | this. ValidateControl. Touched) {

On "touched" the HTML in the login module

<nz-form-explain *ngIf=" validateform. get('userName'). Touched & validateform. get('userName'). Errors ">Please input your userName! < / nz - form - the explain >

When users click on the submit to use this. ValidateForm. Controls [I] markAsTouched ();
It seems to have been close to my needs, but when you lose focus in the border of the input color not become red, prompt information is also not change color (It was later discovered that the prompt's superior div did not have the class of has-error, but I did not know how to complete it)

[LinboLen]

should be touched || dirty ?

[vthinkxie]

@LinboLen yes, you can create a pr for it.

[karanpatel7193]

@vthinkxie I am facing the same issue.
So, I have created stackblitz project so you can check.
https://stackblitz.com/edit/ng-zorro-antd-setup-jgaz51

click on number textbox and time input control and you can see updated touched and dirty flag below.

Thanks in advance.

[vthinkxie]

@lait233 @karanpatel7193 we will support touched in next version.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.