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

我希望有人能帮助我;我的问题是,如果它是可能的,或者如果有一个模块滚动到无效字段,并打开包含该字段的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 ;
    }
  }

叉叉的例子

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何在Google Sheets中把导入的数据从小数改为逗号?

2022-4-21 6:00:10

解决方案

获取全路径中间件Koa-router的映射路径参数。

2022-4-21 6:00:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索