Angular 角度7材料步进反应形式复位不工作

我使用的是带角度7的角度材质。我有许多反应式表单，每个表单都在自己的控件中，每个表单都在更新正在编辑的主对象的不同属性集合。这些控件分别位于角度材质步进控制的不同步骤中

每个控件都有一个名为“添加新对象”的按钮，允许用户向集合中添加新对象，还有一个“编辑”按钮，用于编辑集合中的任何现有项。每当单击“AddNew”按钮时，我都会创建一个具有默认值（大多数为空）的新项，并将其绑定到控件中的被动表单

表单始终允许用户单击“添加到集合”按钮（即，该按钮从不被禁用），并且验证错误（如果有）将显示给用户。（如果存在验证错误，则不会将该项添加到集合中。）

一切正常，直到我转到步进控制的另一个步骤，然后返回我正在处理的步骤。当这种情况发生时，我单击“添加新”按钮，我会立即看到所有必需的验证错误，即使用户没有单击“添加到集合”按钮。当我查看一个控件的值时，我看不到任何应该显示验证错误的原因，但它们确实显示了（空输入周围的红色高亮显示）

以下是每当用户单击“添加新”时我运行的代码：

当我在html中查看单个控件时，我看到了我希望看到的所有内容：

<input _ngcontent-wyd-c14="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-untouched ng-pristine ng-invalid" formcontrolname="title" matinput="" placeholder="e.g. Customer Service Representative" required="" type="text" ng-reflect-required="" ng-reflect-name="title" ng-reflect-placeholder="e.g. Customer Service Represen" ng-reflect-type="text" id="mat-input-24" aria-invalid="true" aria-required="true">

然后我调用这个.formDirective.resetForm（），它没有任何区别-验证错误仍然会立即显示

更新：这里是一个stackblitz，它基本上显示了问题。在第一步中单击“保存并继续”，然后在第二步中单击“添加新”。表单显示时没有验证错误。现在单击步进器的“介绍”步骤，然后单击返回“体验”步骤，您将看到在返回该步骤时显示所有验证。这是我实际生产项目中的问题-用户应该能够在不触发验证的情况下从一个步骤导航到另一个步骤。在experiences组件中，您可以看到每次调用intiForm方法时，我都试图重置表单，但仍然可以看到错误。为什么？链接：

我怀疑的是，在步进机上切换到不同的步骤 控件导致某种形式的表单提交或提交尝试，以及 这就是为什么所有的错误都会显示（form.submitted==true或其他什么） 像那样）

你就在这里。单击“添加新”按钮会导致表单提交，因为任何表单都有类型

submit

。单击“添加新代码”按钮后，表单将显示“已提交代码”标志

解决方案应该很简单：

 <button mat-raised-button color="primary" (click)="addNew()" type="button"...>Add New</button>
                                                               ^^^^^^^^^
                                                              add this

应用程序组件.ts

stepIndexChanged(stepper) {
  stepper.steps.toArray().forEach(step => step.interacted = false)
}

---

您认为您可以在stackblitz.com（最低版本）中复制它吗？我做了这个更改，它确实阻止了在我第一次进入体验步骤时单击“添加新内容”时进行验证。但是，如果您单击“添加新”，然后单击步进器的“介绍”步骤，然后单击返回“体验”步骤，您将看到在返回该步骤时显示所有验证。这是我实际生产项目中的问题-用户应该能够在不触发验证的情况下从一个步骤导航到另一个步骤。@JRS我同意你的看法。请看一下更新后的答案。就是这样！我的制作应用程序正在按预期工作。非常感谢你！出于好奇，你在哪里找到这些信息的？

 <button mat-raised-button color="primary" (click)="addNew()" type="button"...>Add New</button>
                                                               ^^^^^^^^^
                                                              add this

<mat-horizontal-stepper #diaryStepper ... (selectionChange)="stepIndexChanged(diaryStepper)"

stepIndexChanged(stepper) {
  stepper.steps.toArray().forEach(step => step.interacted = false)
}