Материал Angular: автомат c, прокрутите до неверного ввода и откройте matstepper

Question

Я надеюсь, что кто-то может помочь; Мой вопрос заключается в том, что если это возможно или если есть модуль, чтобы прокрутить до недопустимого поля и открыть matstepper, который содержит это поле.

Я пытаюсь использовать ngxScrollToFirstInvalid, но он не открывает шаговый коврик.

на данный момент у меня есть этот код:

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();
 }

Это решение, которое я нашел, но я пытаюсь использовать его, но оно не работает.

Извините за мой плохой Engli sh.

Вопрос в том, есть ли функция для поиска и открытия коврика, содержащего первое недопустимое поле.

Спасибо

Answer 1

Используя экземпляр mat-stepper, вы можете получить статус формы. Затем мы можем перейти к неверному шагу программно. Во-первых, чтобы получить экземпляр mat-stepper, вы должны поместить шаблонный шаблон #stepper в mat-vertical-component следующим образом:

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

Теперь добавьте ViewChild в свой ts следующим образом, чтобы получить экземпляр stepper:

@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 ;
    }
  }

Forked Example