Привет! Мне нужно заполнить систему проверки для моего приложения 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 (), когда первая вкладка не заполнена, он показывает ошибку в диалоговом окне и подсвечивает красным цветом необходимые поля. Я хочу, чтобы даже в случае ошибки проверки второй вкладки ярлык вкладки становился красным, а страница перемещалась на этой вкладке.
Вот моя функция
save(form) {
const state = this.ngRedux.getState();
console.log(this.user.form);
//extract files for upload
//this.prepareImageUpload();
console.log(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.log(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.log(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'
}
});
}
);
}