处理带有明确表单的必填字段 - Angular答案

【问题标题】：Handling mandatory fields with form clear - Angular处理带有明确表单的必填字段 - Angular
【发布时间】：2019-02-24 07:26:18
【问题描述】：

包含一堆必填字段的表单在那里。在这里，我能够完美地处理所有验证和错误消息。但是，当我清除表单时，现在会显示强制性字段的错误消息，例如“字段是强制性的”。在这里，我的预期行为是当清除表单时，表单进入初始阶段，而不是验证任何字段。

我没有任何想法来处理这个问题，所以任何想法或任何建议对我都有帮助。提前致谢。

目前，我正在使用响应式表单并通过通用验证器来处理如下验证。

【问题讨论】：

你能分享你的代码吗
您使用的是什么类型的表格？如果是响应式表单，那么在显示验证反馈时.. 使用 .touched && .errors。在 *ngIf 作为条件。
@Chellappan 更新
@ShubhamYerawar 是的，也使用响应式表单和更新的验证代码。
这对我来说是新事物..你能提供一个最小的代码，我可以复制它来解决你的问题。

标签： angular typescript

【解决方案1】：

您需要在以下情况下显示错误消息：

(1) 字段有错误并且

(2) 该字段是脏的或被触摸的——换句话说，当该字段未被篡改时。最初，一个字段不脏，也没有被触及。当您更改值时，它会变脏。当您给字段焦点然后它失去焦点时，它会被触摸。我相信像您描述的那样重置表单应该使所有字段再次干净且不受影响。

像这样管理肮脏和感动：

<label>
  First Name:
  <input formControlName="firstName" required> <!-- required is optional -->
</label>

<div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="alert alert-danger">
  <div *ngIf="firstName.errors.required">Name required</div>
  <div *ngIf="firstName.errors.minlength">Name min length is 3</div>
</div>

文档：https://angular.io/guide/form-validation

【讨论】：

非常感谢您的回答，现在我可以完美地完成所有验证，但清除表单时出现问题。正如您所建议的，清除表单时如何使所有字段都干净。
stackoverflow.com/questions/43759590/…
this.myForm.resetForm();
如果这不起作用试试这个... malcoded.com/posts/… ... 它只使用 this.myForm.reset(); ...这不仅应该清除值（或者您可以提供要重置的值），还应该重置已触摸和脏标志
谢谢，是的，我们可以使用 this.formname.reset() 进行重置