我在 Angular 7 中使用 Angular Material。我有许多 react 形式,每个都在自己的控制中,每个都更新正在编辑的主要对象的不同属性集合。这些控件分别托管在 Angular Material Stepper 控件的不同步骤中。

每个控件都有一个名为“Add New”的按钮,它允许用户向集合中添加一个新对象,还有一个“Edit”按钮来编辑集合中的任何现有项目。每当单击“添加新”按钮时,我都会创建一个具有默认值(大多数为空)的新项目,并将其绑定(bind)到控件中的响应式(Reactive)表单。

表单始终允许用户单击“添加到集合”按钮(即,该按钮永远不会被禁用),并且当时会向用户显示验证错误(如果有)。 (如果存在验证错误,则不会将该项目添加到集合中。)

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

这是每当用户单击“添加新”时我正在运行的代码:

public resetForm(formGroup: FormGroup) {
if (!formGroup)
  return;

  formGroup.reset();
  formGroup.clearValidators();
  // see https://stackoverflow.com/questions/48216330/angular-5-formgroup-reset-doesnt-reset-validators
  Object.keys(formGroup.controls).forEach(key => {
    if (ignoreControls.indexOf(key) == -1) {
      formGroup.get(key).setErrors(null);
      formGroup.get(key).markAsPristine();
      formGroup.get(key).markAsUntouched();
      formGroup.get(key).clearValidators();
      formGroup.get(key).updateValueAndValidity();
    }
  });

当我查看单个控件时,在 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">

请注意,该类包含 ng-untouched 和 ng-pristine(以及 ng-invalid)。如果一个字段是原始的且未受影响,则不应显示验证错误。

我怀疑在 Stepper 控件上更改为不同的步骤会导致某种形式的提交或提交尝试,这就是为什么所有错误都显示(form.submitted == true 或类似的东西)。但我不知道如何重置任何东西以将表单视为全新的。

任何人都可以帮忙吗?

(注意:我看过许多 SO 文章,建议我需要在 form 指令上调用 resetForm,而不是 formGroup(参见例如 Angular 5 FormGroup reset doesn't reset validators )。
但是,当我将 #formDirective="ngForm"添加到我的表单标签并添加到我的 typescript 时:
@ViewChild('formDirective') private formDirective: NgForm;

然后我调用 this.formDirective.resetForm(),它没有区别 - 验证错误仍然会立即显示。

更新:这是一个stackblitz,它基本上显示了问题。从第一步单击“保存并继续”,然后在第二步单击“添加新”。表单出现时没有验证错误。现在点击步进器的“Intro”步骤,然后点击返回“Experiences”步骤,当你返回到该步骤时,你会看到所有的验证都出现了。这是我实际生产项目中的问题 - 用户应该能够在不触发验证的情况下从一个步骤导航到另一个步骤。在体验组件中,您可以看到每次调用 intiForm 方法时我都在尝试重置表单,但您仍然看到错误。为什么?链接:https://stackblitz.com/edit/angular-w4iunu

最佳答案



你就在这里。单击“添加新”按钮会导致提交表单,因为任何 button in HTML by default 都具有 submit 类型。单击 Add New 按钮后,您的表单将获得 submitted 标志。

解决方案应该很简单:

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

Forked Stackblitz

这里的另一个问题是 Stepper 在计算控制的错误状态时考虑了 step 的 interacted 属性。一旦你从一个步骤移动到另一个步骤,它就会变成 true

您可以通过在 selectionChange 上重置此属性来解决此行为:

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

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

Updated Stackblitz

关于 Angular 7 Material 步进器 react 形式重置不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57445739/

10-12 12:33
查看更多