如何解决角度反应形式 - 改变输入类型触发表单验证
我有一个使用 Angular 11.2.7 和 Angular Material 制作的简单注册表单。这是stackblitz。
我将密码字段的可见性更改为最后 3 秒,然后它们的状态变回“密码”。因此,当用户点击任何密码控件中的“眼睛”时,密码文本将以明文显示,然后在 3 秒后变回点。
但是这个状态改变触发了整个表单验证的问题,所有无效的都变成了“无效”的样子(变红)。谁能告诉我为什么?
此外,我不得不为我的 Observable 使用多播,但我可能做得不对。我不确定。
解决方法
嗨,问题是表单中没有任何定义类型的按钮就像表单的提交按钮一样,必填字段将显示错误。只需将 type='button'
添加到按钮标签即可。
form [formGroup]="frm">
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input
type="email"
matInput
placeholder="yourname@domain.com"
formControlName="email"
required
/>
<mat-error *ngIf="isTouchedAndInvalid('email')">{{ getErrorMessage("email") }}</mat-error>
</mat-form-field>
</div>
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Enter your password</mat-label>
<input matInput [type]="(passwordType$ | async)!" />
<button
mat-icon-button
matSuffix
(click)="showPassword()"
[attr.aria-label]="'Hide password'"
type='button'
>
<mat-icon>{{ hidePassVisibility$ | async }}</mat-icon>
</button>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Confirm password</mat-label>
<input matInput [type]="(passwordType$ | async)!" />
<button
mat-icon-button
matSuffix
(click)="showPassword()"
[attr.aria-label]="'Hide password'"
type='button'
>
<mat-icon>{{ hidePassVisibility$ | async }}</mat-icon>
</button>
</mat-form-field>
</div>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。