材料角度：自动滚动到无效输入并打开matstepper。

Posted 2021-03-19

我希望有人能帮助我；我的问题是，如果它是可能的，或者如果有一个模块滚动到无效字段，并打开包含该字段的matstepper。

我尝试使用ngxScrollToFirstInvalid，但它不能打开mat stepper。

现在我有这样的代码。

scrollTo(el: Element): void {
    if(el) {
     el.scrollIntoView({ behavior: 'smooth' });
    }
 }

 scrollToError(): void {
    const firstElementWithError = document.querySelector('.ng-invalid');
    this.scrollTo(firstElementWithError);
 }

 async scrollIfFormHasErrors(form: FormGroup): Promise <any> {
   await form.invalid;
   this.scrollToError();
 }

这是我找到的一个解决方案，但我尝试使用它，但它不工作。

对不起，我的英语不好。

问题是，是否有一个函数可以找到并打开包含第一个无效字段的mat-stepper。

谅谅

答案

使用matstepper实例，你可以得到表单状态。然后我们就可以程序化地导航到无效步骤。首先，为了得到mat-stepper实例，你必须将#stepper模板varibale放在mat-vertical-component上，像这样。

<mat-vertical-stepper #stepper [linear]="isLinear">

现在在你的ts中添加ViewChild，像这样来获取steppper实例。

@ViewChild('stepper') private myStepper: MatStepper;

最后，你可以使用stepControl属性来检查单个表单的状态，像这样，通过设置selectedIndex来导航到无效的步骤。

 scrollToError(): void {
    const steps = this.myStepper._steps.toArray();
     for(let i = 0; i < steps.length -1; i++ ){
        if(!steps[i].stepControl.valid){
       this.myStepper.selectedIndex = i;  
       return ;
    }
  }

叉叉的例子