Angular 5更改选项卡上的验证错误

Question

您好我需要为我的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（）当第一个标签未完成时，它会在对话框中显示错误，而红色显示为红色所需的字段。我希望即使检查secon选项卡返回错误，TAB的标签变为红色并且此选项卡上的页面移动。

这是我的功能

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

);

}