浏览器自动填充时表单无效

浏览器自动填充时表单无效

本文介绍了Angular 2 - 浏览器自动填充时表单无效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含电子邮件和密码字段的登录表单.

I have a Login Form which has email and password fields.

我选择了浏览器自动填充.

I've chosen for browser autofill.

问题是:当浏览器自动填写登录表单时,这两个字段都是原始的且未受影响,因此提交按钮被禁用.

The problems is: When browser autofills login form, both fields are pristine and untouched, so the submit button is disabled.

如果我点击禁用按钮,它会启用并触发提交操作,这很好.但是默认的禁用方面非常糟糕,这会让一些用户感到失望.

If I click on disabled button, it enables and fires submit action, what is nice. But the default disabled aspect is pretty bad what can make some users disappointed.

你对如何处理有一些想法吗?

Do you have some ideas about how to deal with?

推荐答案

我通过在显示错误消息时检查表单是否被触摸来解决这个问题.例如,提交按钮看起来像这样

I solved it by also checking if the form was touched when displaying error messages.So, for example, the submit button looks like this

<input type="submit" class="btn btn-default" [disabled]="loginFormGroup.invalid && loginFormGroup.touched" />

这篇关于Angular 2 - 浏览器自动填充时表单无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 23:44