Angular 2 - 删除自动保存用户名和密码 [英] Angular 2 - remove auto save username and password

查看:33
本文介绍了Angular 2 - 删除自动保存用户名和密码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个登录表单,我使用 Angular 2 表单验证进行了验证,如下所示.

 
<div class="form-group" [ngClass]="{'has-error': f.submitted && !username.valid}"><label class="lbl">*用户名</label><input type="text" class="form-control uname" name="username" autofocus [(ngModel)]="model.username" #username="ngModel" required><div class="alert alert-danger" [hidden]="!f.submitted || (username.touched && username.valid)">需要用户名</div>

我使用了 ngModel="model.username" 因为模型是一个对象,我将在其中将用户名和密码发送到后端.

表单,验证按预期工作正常,但是当用户使用自动保存的浏览器保存用户名和密码,并打开页面并单击登录按钮时,验证失败并给出错误消息.我想从浏览器中删除自动保存的详细信息,或者如果数据已经存在,它应该验证为 true.

任何帮助将不胜感激.

解决方案

只需在 property autocomplete="new-password">形式

如果您有密码字段,请将其添加到密码输入字段中.

I have a log in form where I have done validations using Angular 2 form validations as below.

  <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate class="loginForm">
    <div class="form-group" [ngClass]="{'has-error': f.submitted && !username.valid}">
      <label class="lbl">*Username</label>
      <input type="text" class="form-control uname" name="username" autofocus [(ngModel)]="model.username" #username="ngModel" required
        >
      <div class="alert alert-danger" [hidden]="!f.submitted || (username.touched && username.valid)">User Name is required</div>
    </div>

I have used ngModel="model.username" because model is an object in which I will be sending both username and password to backend.

Form, validation is working fine as expected but when a user save the username and password with browser which is auto save, and open the page and click log in button at that time validation is failing and giving error messages. Either I want to remove auto saved details from browser or it should validate true in case data is already there.

Any help will be highly appreciated.

解决方案

Simply add the following property autocomplete="new-password" in input field of form

<input type="password" autocomplete="new-password" />

If you have password field then add this to password Input field.

这篇关于Angular 2 - 删除自动保存用户名和密码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆