Angular Material Stepper 导致 mat-formfield 在返回到旧步骤时验证动态表单

问题描述

限时删除！！

在处理动态表单时，角材料 mat-stepper 出现问题.例如，我有一个带有 3 个步骤的步进器，每个步骤都有自己的形式.然而，第一步使用隐藏表单来确定它是否有效，因为这一步可以动态添加更多表单，因此不可能将所有表单都绑定到该步骤.

A problem is occurring with the angular materials mat-stepper when working with dynamic forms. For example I have a stepper with 3 steps each having there own form. The first step however uses a hidden form to determine if it is valid or not as this step can dynamically add more forms so binding all of them to the step is impossible.

当您处于第一步时，您可以创建多个表单，一切都按预期工作，而不会对添加的新表单进行任何随机验证.如果您转到第 2 步或第 3 步，然后返回第一步，然后创建一个新表单，它将自动以红色突出显示的所有字段开始.

When you are on the first step you can create multiple forms and everything works as expected without any random validation occurring to the new forms added. The problem occurs if you go to step 2 or 3 and come back to the first step and then create a new form it will automatically start with all the fields highlighted red.

我尝试了许多不同的尝试来压制，但都没有成功.下面是一个基本示例，说明我的第一步如何包含一个绑定到步骤控件的 hiddenForm、一个默认表单和一个用于在该步骤中创建更多表单的按钮.

I have tried many different attempts to suppress however I have not been successful. Below is a basic example of how my first step contains a hiddenForm bound to the step control, a default form, and a button to create more forms in that step.

我试图解决此问题的研究使我相信，无论是否新添加，材料步进器都会使所有 mat-form-fields 在无效时变为红色.

My research into trying to fix this is leading me to believe that the material stepper is making all mat-form-fields to be red if invalid, regardless if newly added or not.

<mat-horizontal-stepper [linear]="true">
    <mat-step [stepControl]="hiddenForm" label="step 1"
      <form [formGroup]="myForm">
        <mat-form-field>
          <mat-label>
            First Name
          </mat-label>

          <input [formControl]="firstName"matInput>

          <mat-error *ngIf="!firstName.valid && firstName.touched">
            First Name required
          </mat-error>
        </mat-form-field>
      </form>

    <button (click)="AddNewForm()">Add New Form</button>
  </mat-step>
</mat-horizontal-stepper>

尝试失败:(当前表单是新添加的表单)

Failed attempts tried: (Current form is the newly added form)

this.currentForm.markAsUntouched();
this.currentForm.markAsPristine();
this.currentForm.setErrors(null);
this.currentForm.reset();

this.currentForm.get('firstName).setErrors(null);
this.currentForm.get('firstName).reset();
this.currentForm.get('firstName).markAsPristine();
this.currentForm.get('firstName).markAsUntouched();

<mat-step [completed]="true" ..> ( on all steps )

推荐答案

背景信息

我发现的最好的解决方案是更改 mat-stepper 上的参数.在任何给定时间都会选择一个步骤.在步骤中，您可以更改该步骤是否已被交互.如果之前访问过某个步骤，则 interacted 参数将被设置为 true.由于这是有意的并且是有道理的，但是将类添加到所有 mat-form-fields 会导致问题，导致它们变红.

Background Information

The nicest solution I have found is changing a parameter on the mat-stepper. There is a step selected at any given time. On step you can change whether the step has been interacted with or not. If a step has been previously visited the interacted parameter will then be set to true. As this is intended and makes sense it will however cause a problems adding a class to all the mat-form-fields causing them to go red.

1. 您完成了第一步并转到了第二步.进入第二步后，您意识到自己在第一步中犯了错误，并决定返回第一步.您进行更改，现在再次进行第二步.因为如果你有 mat-form-fields ，你已经访问了这一步，一个类将被添加(可能还有其他更改)并且你的表单字段现在都是红色的.这是一种糟糕的用户体验，因为用户在技术上没有犯任何错误并且可能会过度承受.

1. You complete the first step and go to the second step. After going to the second step you realize you made a mistake on the first step and decide to navigate back to the first step. You make your changes and now proceed once again to the second step. Because you have already visited this step if you have mat-form-fields a class will be added (possibly other changes) and your form fields are now all red. This is a poor user experience as the user has technically not made any mistakes and can be over bearing.

第一步是创建动态表单.为简单起见，让我们使用英雄之旅类比.在我们的第一步中，您可以动态添加表单.每个表单代表您要添加的新英雄.您已经添加了 3 个英雄并进入了第 2 步.在完成第 2 步之前，您意识到您忘记了几个英雄并返回到第 1 步.现在，当您单击我们的创建英雄"按钮时，您的动态表单会弹出，但您所有的 mat-form-fields 现在是红色的，就像用户犯了一个错误.这是另一个糟糕的用户体验.

In the first step you have it where you are creating dynamic forms. For simplicity let use the tour of heroes analogy. In our first step you can dynamically add forms. Each form represents a new hero you want to add. You have added 3 heroes and moved on to step 2. Before completing step 2 you realize you forgot a few heroes and proceed back to step 1. Now when you click our button 'create hero' your dynamic form pops up but all your mat-form-fields are now red like the user made a mistake. This is another poor user experience.

修复:

hero.stepper.html

The Fix:

hero.stepper.html

<mat-horizontal-stepper [linear]="true"
  (selectionChange)="stepChanged($event, stepper);">

  <mat-step [stepControl]="hiddenForm" label="step 1"
    <form [formGroup]="heroFormGroupArray[0]">
      <mat-form-field>
        <mat-label>Hero Name</mat-label>

        <input [formControl]="heroName"matInput>

        ...
      </mat-form-field>
    </form>

    <button (click)="AddNewHero()">Add New Hero</button>
  </mat-step>
</mat-horizontal-stepper>

hero.stepper.ts

hero.stepper.ts

export class heroStepComponent implements OnInit {
  constructor(){
    ...
  }

  ngOnInit(){
    ...
  }

  stepChanged(event, stepper){
    stepper.selected.interacted = false;
  }
}

这篇关于Angular Material Stepper 导致 mat-formfield 在返回到旧步骤时验证动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..