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-z\d$@$!%*?&]{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

在“输入”字段中创建template reference variable。

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

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

<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属性，因此大多数都使用模板引用变量。您可以找到此方法的演示here。

Answer 2

试试这个。

将此部分添加到输入字段（template reference variable）

#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-z\d$@$!%*?&]{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>

然后它应该工作。阅读here中有关模板驱动表单的更多信息。

Answer 3

正如其他人所说，你应该使用像＃passwordElement =“ngModel”

这样的元素变量

查看stackblitz

Answer 4

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

#password=ngModel

还要将必需添加到您的密码标记中，如下所示：

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

我刚测试了它，它在我的最后工作。

Answer 5

创建临时引用变量。

之类的东西

<input #password=ngModel />

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

* ngIf密码验证不工作Angular 5

5 个答案: