*ng如果密码验证不起作用 Angular 5

Question

我似乎无法弄清楚问题是什么，我有一个这样的表单输入。

<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}">
</div>

然后在它下面我有..

<div *ngIf="!password.valid && (password.dirty || password.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>

现在，如果我没有有效的密码并且它被触摸了，则没有任何反应，但我知道验证正在起作用，因为我表单上的按钮被禁用，直到我正确输入密码。

不知道我做错了什么？ 为什么div 不会显示自己？？

编辑如果我拿走&& (password.dirty || password.touched)它就可以工作，但我只想显示消息如果他们输入无效密码并取消触摸..

我可以在我的开发工具中看到正在应用这些类

但是当我的密码有效时，它不会消失。

编辑 2

我正在使用模板驱动的表单

任何帮助将不胜感激。

Answer 1

在输入字段上创建模板引用变量。

<input #passwordField="ngModel" type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}">

确保使用模板中的passwordField更新对password的引用。

<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>

由于您使用的是模板驱动的表单，因此组件中没有相应的password属性，因此大多数使用模板引用变量。您可以在此处找到此方法的演示。

Answer 2

试试这个。

将此部件添加到输入字段(模板引用变量(

#passwordField="ngModel"

---

<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}" #passwordField="ngModel">
</div>
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>

那么它应该可以工作。在此处阅读有关模板驱动表单的更多信息。

Answer 3

正如其他人所说 你应该使用一个元素变量，比如#passwordElement="ngModel">

看看斯塔克闪电战

Answer 4

正如其他人所说，您需要在密码div中提供模板参考：

#password=ngModel

还要将required添加到您的密码标签中，如下所示：

<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" #password=ngModel pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}" required>

我刚刚测试了它，它对我有用。

Answer 5

创建临时引用变量。 类似的东西

<input #password=ngModel />

然后使用 #password 进行验证。还要确保您正确应用了触摸和脏类。