Вкладка изменения Angular 5 при ошибке проверки

Привет, мне нужно заполнить систему проверки для моего приложения Angular 5. У меня на странице 3 вкладки, например:

<mat-tab-group *ngIf = "action=='edit'"
    (selectedTabChange) = "tabChanged($event)"
    [(selectedIndex)] = "selectedTabIndex" dynamicHeight = "true">
        <mat-tab label = "Dati"> </mat-tab> 
        <mat-tab label = "Metodi"> </mat-tab> 
        <mat-tab label = "Immagini"> </mat-tab> 
</mat-tab-group>

В компоненте контроллера у меня есть метод save (), когда первая вкладка не заполнена, он показывает ошибку в диалоговом окне и выделяет красным необходимые поля. Я хочу, чтобы даже если проверка на второй вкладке вернула ошибку, метка TAB стала красной, а страница переместилась на эту вкладку.

Вот моя функция

save(form) {
const state = this.ngRedux.getState();
console.info(this.user.form);
//extract files for upload
//this.prepareImageUpload();
console.info(this.user.form)
this.formDisabled = form;
this.saving = true;
//  form.disable();

this.loading = this.help.loading();

this.usersActions.saveAndReturn(this.user.form).subscribe(response => {
  console.info(response);
  let user = response.data;
  if (this.user.form.conti == '') {
    this.help.alert({
      title: 'Error',
      subtitle: 'Occorre completare la sezione conti per poter salvare',
      cancel: {
        name: 'Annula'
      }
    });
  }
  else if (this.user.form.paymentmethods == '') {
    this.help.alert({
      title: 'Error',
      subtitle: 'Occorre completare la sezione modalità di pagamento per poter salvare',
      cancel: {
        name: 'Annula'
      }
    });
  } else {
    if (state.session.fakeUser) {
      if (state.session.fakeUser.id == user.id) {
        this.usersActions.updateConti(user.conti);
        this.usersActions.updatePayment(user.paymentmethods);
      }
    } else {
      if (state.session.user.role == 'user') {
        this.usersActions.updateConti(user.conti);
        this.usersActions.updatePayment(user.paymentmethods);
      }
    }


    if (this.user.form.logo && typeof this.user.form.logo != 'string') {
      this.usersProvider.uploadFile(user.id, this.user.form.logo.file, 'logo').subscribe(
        resp => {
          //  console.info(resp);
        }
      )
    }
  }

  this.loading.close();

  if (state.session.user.role == 'admin') {
    if (this.userSubscribe){
      this.userSubscribe.unsubscribe();
    }
    if (this.lookupSubscribe){
      this.lookupSubscribe.unsubscribe();
    }



      this.router.navigateByUrl('clienti-studio');
  }
},
  error => {
    this.loading.close();
    this.help.alert({
      title: 'Error',
      list: error.validation,
      cancel: {
        name: 'Annula'
      }
    });
  }

);

}

Вам нужно создать что-то с tabChanged, которое может определить, можно ли сохранить эту вкладку или нет.

Swoox 04.05.2018 12:25

Чтобы изменить вкладку в вашем коде, используйте this.selectedTabIndex = tabIndex.

G. Tranter 04.05.2018 21:50
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
1 118
0

Другие вопросы по теме