验证应用于文本框答案

【问题标题】：Validation get applied to textbox验证应用于文本框
【发布时间】：2018-11-23 09:15:43
【问题描述】：

当页面被渲染时，默认情况下会应用所需的验证。当我检查该元素时，它同时显示 ng-pristine 和 ng-invalid 类。

在 HTML 中：

<input type="password" class="form-control" placeholder="Password" name="password" required pattern=".*(?=.{8,})(?=.*\d)(?=.*[a-zA-Z])(?=.*[`~!@@#$^*|+\-_=;:()&?%'/,.<>\{\}\[\]\\]).*" [ngModel]="user.password" #password="ngModel">

在 TS 中：

public user:logdetails;

ngOnInit() {  
   this.user=new logdetails();    
}

export class logdetails
 {
   password:string;
   confirmpassword:string;
 }

如何在页面加载时防止这种必需的验证？

【问题讨论】：

你的问题是什么？
为什么需要验证以及如何防止它。
请同时添加您的 CSS 类。
input 标签中有一个模式，这就是为什么默认应用它的原因，那么你想什么时候应用该验证？
@Amey 再次阅读了我的评论。红色边框不会单独出现。之所以出现，是因为您在某处定义了一些 CSS 规则，即当一个字段具有 css 类 ng-invalid 时，它应该有一个红色边框。但你不希望那样。您希望它仅在字段具有类 ng-invalid ** 和 ** 类 ng-touched 时出现。因此，将 CSS 选择器更改为 .ng-invalid.ng-touched 而不仅仅是 .ng-invalid。始终应用验证是一件好事。您只是不想总是显示红色边框，这是另一回事

标签： angular validation angular5

【解决方案1】：

您已将必需属性添加到输入字段，如果其为 null 或“”，则表示该字段无效。如果您希望仅在用户触摸字段后添加 css 类进行验证，请检查原始和有效。用户触摸输入字段后，原始更改为 false。要删除所需的验证，您必须从输入字段中删除所需的属性。

【讨论】：

那么在开始时应该给属性什么。一开始我们将空模型分配给输入标签，对吗？原因在其他形式中也使用了相同的方法，但效果很好。
是的，但在警告用户他输入了无效的输入字段值之前，请检查 formControl.pristine 状态，并仅在 pristine = false 时显示警告。对于代码可读性，我建议删除该模式验证并在您需要特定内容时使用自定义验证器。
我也尝试过表单更新有效性并将表单设置为原始且未触及，但它对我也不起作用。
我也尝试删除模式，但没有解决问题。
如果我给出简单的字符串变量，它会显示需要验证。