Angular响应式表单-2个密码类型输入框-第二个不响应隐藏/显示按钮的点击
创始人
2024-10-30 05:30:42
0

在模板中我们需要添加隐藏/显示按钮并对其进行操作。解决方法如下所示:

1.模板:

2.组件:

import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({ selector: 'app-password', templateUrl: './password.component.html', styleUrls: ['./password.component.css'] }) export class PasswordComponent { hidePassword = true; // initial value for hidePassword

form = new FormGroup({ password1: new FormControl('', [Validators.required, Validators.minLength(6)]), password2: new FormControl('', [Validators.required, Validators.minLength(6)]) });

hideUnhide() { this.hidePassword = !this.hidePassword; // toggle hidePassword }

get password2Type() { return this.hidePassword ? 'password' : 'text'; // determine input type based on hidePassword } }

  1. 模板中使用:

这里使用了一个新的getter方法 password2Type 来根据 hidePassword的状态(true或false)来切换第二个密码框的input类型。

在按钮的点击事件方法中,使用 ! 操作符将 hidePassword 改为相反的值, 这样就可以动态地切换输入密码时的显示和隐藏了。

相关内容

热门资讯

透视攻略(WEPOKER)we... 透视攻略(WEPOKER)wepoker免费脚本咨询(透视)果然存在有挂(解密教程)1、玩家可以在w...
透视最新(wpk透视插件)其实... 透视最新(wpk透视插件)其实是真的有挂(透视)刷入池率脚本(解密教程)1、每一步都需要思考,不同水...
透视辅助(wepoker)we... 透视辅助(wepoker)we-poker正规吗(透视)切实真的有挂(2025新版总结)1、we-p...
透视真的(wpk模拟器是什么)... 透视真的(wpk模拟器是什么)确实有挂(透视)辅助(存在挂教程)1、进入到wpk模拟器是什么黑科技之...
透视智能ai(wpk俱乐部辅助... 透视智能ai(wpk俱乐部辅助器)确实是真的有挂(透视)辅助软件(分享教程)1、进入到wpk俱乐部辅...
透视透视(WePoKer)we... 透视透视(WePoKer)wepoker有没有挂(透视)总是存在有挂(我来教教你)1、玩家可以在we...
透视科技(wpk私人辅助)好像... 透视科技(wpk私人辅助)好像是有挂(透视)模拟器(分享教程);1、点击下载安装,wpk私人辅助插件...
透视ai(WEPOKER)破解... 透视ai(WEPOKER)破解辅助插件wepoker(透视)一直有挂(AI教程)一、破解辅助插件we...
透视辅助(购买的wpk辅助在哪... 透视辅助(购买的wpk辅助在哪里下载)果然有挂(透视)模拟器(wepoke教程);1、超多福利:超高...
辅助透视(WePoKer)we... 辅助透视(WePoKer)wepoker有插件吗(透视)好像真的有挂(揭秘教程)1、实时wepoke...