社区首页 >问答首页 >角形“确认密码”显示错误

角形“确认密码”显示错误
EN

Stack Overflow用户
提问于 2019-10-17 10:32:12
回答 2查看 1.1K关注 0票数 0

我正在使用角度形式来创建一个寄存器形式。我已经做了一个自定义验证器,它检查密码是否与确认密码字段相同。虽然“密码不匹配”的错误没有显示,但在输入所有字段之前,输入仍然是红色的。

具有自定义验证器方法checkPasswords的表单生成器

代码语言:javascript
代码运行次数:0
复制
this.registerForm = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
  confirmPassword: ['', [Validators.required]]
  },
  { validator: this.checkPasswords });


checkPasswords(group: FormGroup) {
  // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPassword = group.get('confirmPassword').value;
  return pass === confirmPassword ? null : { notSame: true };
}

以及下面的html

代码语言:javascript
代码运行次数:0
复制
<mat-form-field required>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error>Password is not valid</mat-error>
</mat-form-field>

<mat-form-field required>
    <input matInput type="password" placeholder="Confirm password"
           formControlName="confirmPassword"
           [errorStateMatcher]="matcher">
    <mat-error *ngIf="registerForm.hasError('notSame')">Passwords do not match</mat-error>
</mat-form-field>

我尝试过进行一些调试,我认为这是因为表单组状态在输入所有字段之前都是“无效”的,但是confirmPassword的窗体组控件显示为有效。如何获得confirmPassword的状态以使用其控件的状态?

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-17 19:51:52

这是因为有棱角的材料。如果给定控件上没有错误,则<mat-error>将不可见。您需要在confirmPassword字段上设置错误以显示错误。

票数 1
EN

Stack Overflow用户

发布于 2019-10-17 19:01:20

所有输入都是红色的吗?

可能是物质输入首先检查控件是否被触摸或脏(在将其标记为红色之前),但如果表单本身无效,则立即将其标记为红色。

查看代码,您的registerForm末尾的验证器似乎是在用户填充confirmPassword字段之前运行的,将registerForm标记为无效。

备选方案:

  1. 如何具体地将checkPasswords验证器应用于confirmPassword而不是整个表单?checkPasswords中的
  2. ,请检查confirmPassword控件是否也被触摸或脏(除了
  3. 之外)。
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58438783

复制
相关文章
macbook重设密码服务器错误_网页显示500错误
1。右键我的电脑–管理–本地用户和组,给IUSR_机器名和IWAM_机器名两个用户设置密码,要一样。
全栈程序员站长
2022/09/21
3.1K0
点击显示错误
双折线点击一个,另一显示a b 错误.PNG 正确.PNG 隐藏一条线 tooltip: { // 气泡 trigger: "axis"
用户4344670
2019/08/28
1.2K0
点击显示错误
达梦数据库在重启电脑后,输入密码显示链接错误
1.刚进入达梦数据库需要登录 2.提示登录错误,链接问题 3.解决:重新将被关闭的服务开启即可 4.链接成功
2021/01/29
1.4K0
「R」显示英文错误
中文使用 R 经常看到各种乱码文字,让人看不懂意思,特别是在 Windows 系统上。
王诗翔呀
2020/07/02
1.8K0
Android实现密码隐藏显示
需求:当用户点击提现按钮的时候,弹出输入支付密码的popupwindow,输入密码框后面有显示和隐藏支付密码的切换按钮。
程序员飞飞
2020/02/27
3.4K0
Android实现密码隐藏显示
camera密码错误_camera filter
出现flicker(banding)问题时,从视频上看会发现有规律的明暗相间的条纹,这种现象也叫做牛顿环。如下图所示。
全栈程序员站长
2022/11/19
1.3K0
camera密码错误_camera filter
敏感信息泄露+IDOR+密码确认绕过=账户劫持
目标网站是一个工作招聘门户网站,测试保密原因暂且称其为redacted.com。一开始,我登录以应聘者身份去测试CSRF或某些存储型XSS,但没什么发现。接下来,我就想到了越权测试(IDOR),为此,我又创建了另外一个账号,两个账号一起可以测试如注册、登录、忘记密码等功能点的越权可能。
FB客服
2019/07/29
9830
出现“内部错误,无法显示”
This page contains the following errors: error on line 2 at column 6: XML declaration allowed only at the start of the document Below is a rendering of the page up to the first error. 提示信息是头部有错误,我登录后台查看我修改过的页面,然后找到home.php我看了十几分钟没有发现那里有错误~~ 莫非头部不能有空格? 去掉试试
苦咖啡
2018/05/07
3.2K0
网页标签闪烁 + 显示隐藏密码
感觉标签闪烁蛮有意思的,再加一篇凑一下字数。点击下方阅读原文,查阅文档,里面会有平时的积累。
OBKoro1
2020/10/27
2.6K0
网页标签闪烁 + 显示隐藏密码
linux python 中文显示错误
UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 20-25: ordinal not in range(128)
py3study
2020/01/07
5.4K0
JavaScript案例:仿京东显示密码
点击按钮将密码框切换为文本框,并可以查看密码明文。 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码。 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框。 算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0,如果是0就切换为密码框,flag设置为1。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv
岳泽以
2022/10/26
7050
JavaScript案例:仿京东显示密码
Android 密码的隐藏和显示
在Android开发中,需要密码的隐藏和显示,下面就和大家分享一下使用方法: xml代码:
网罗开发
2021/01/29
2.2K0
Android 密码的隐藏和显示
C#实现登录界面,密码星号显示(隐藏输入密码)
在软件设计时,往往需要设置用户的登录权限。用户在填写密码时,如何实现输入隐藏,或者以“*”号进行隐藏显示?这里需要利用textBox的PasswordChar属性。
全栈程序员站长
2022/09/15
3.7K0
C#实现登录界面,密码星号显示(隐藏输入密码)
html表单验证确认密码_简述html5的表单验证
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/17
3.5K0
html表单验证确认密码_简述html5的表单验证
EditText输入密码的显示和隐藏
密码的显示和隐藏是一个很常见的小知识点,主要包括2个部分:小图标的变化和EditText输入密码的显示和隐藏
AntDream
2019/07/15
2.5K0
如何实现密码的显示和隐藏?
如图所示,我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的,那么到底怎么实现这个功能呢?
用户7656790
2020/12/14
6.1K0
如何实现密码的显示和隐藏?
C# TextBox输入密码显示星号(*)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/161479.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/15
1.8K0
C# TextBox输入密码显示星号(*)
如何定位前端UI显示错误
在做Web端功能测试时,尤其是前端UI页面检查的时候,有些字面显示或统计数字显示等,是无法在正常情况下显示出来的,只能等到满足一定的条件下,才会显示出来,这个时候光检查当前显示的样式感觉有些被动,测试不全面,其实可以借助工具来进行模拟数据进行验证。
wangmcn
2022/10/30
1.1K0
如何定位前端UI显示错误
xp系统登录密码总是提示错误
朋友的电脑,笔记本,xp系统,开始没有对账户设置密码,后来因需要设置了密码,下一次登陆的时候密码校验失败。
horsley
2022/08/16
1.8K0
点击加载更多

相似问题

密码确认不显示确认消息

11

Woocommerce确认密码未显示

12

为错误设计密码确认

12

确认密码仍然显示“密码不匹配”,即使密码匹配。

24

在PHP中验证密码和确认密码错误一直显示

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档