Обновление компонента с пользовательской обработкой ошибок в angular 6

Question

Я использую Angular 6.

Я создал собственный обработчик ошибок, расширяющий Error Handler для обработки всех сетевых ошибок, таких как.

import {ErrorHandler, Injectable, Injector} from '@angular/core';
import {HttpErrorResponse} from '@angular/common/http';
import {Router} from '@angular/router';
import {ErrorsService} from '../errors-service/errors.service';
import {ToastrService} from 'ngx-toastr';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

  constructor (
    private injector: Injector,
    private toastr: ToastrService
  ) {}

  handleError(error: Error | HttpErrorResponse) {

    const errorsService = this.injector.get(ErrorsService);

    const router = this.injector.get(Router);

    if (error instanceof HttpErrorResponse) {
      if (!navigator.onLine) {
        // Handle offline error

      } else {
        // Handle HTTP Error
        console.log('Http Error occurred');
        errorsService.log(error);

        if (error.status === 403 || error.status === 401) {
          // Clear credentials to login again
          router.navigate(['/auth/logout']).then();
        }

        if (error.status === 400) {
          if (error.error !== null) {
            // Handle 400 errors
            // Generally validation error.
          }
        } else if (error.status === 404) {
          // resource not available
          message = 'Requested resource does not exists';
        } else {
          // handle other type of errors
          message = `${error.status} - ${error.message}`;
        }

      }
    } else {
      // Client Error Happened
      // Send the error to the server and then
      // redirect the user to the page with all the info
      console.log('Not HttpError occurred');
      errorsService.log(error);
    }
  }
}

Этот обработчик обрабатывает все ошибки, как ожидалось. Но в HTML- коде кнопки отправки кнопка отключена в статусе отправленных, как

export class SignupComponent implements OnInit {

  form: FormGroup;
  submitted = false;

  constructor(
      private fb: FormBuilder,
      private auth: AuthService
  ) { }

  ngOnInit() {
    // Initialize form
    this.form = this.fb.group({});
  }

  /**
   * Submit form
   */
  onSubmit() {
    this.submitted = true;

    if (this.form.invalid) {
      this.submitted = false;
      return;
    }

    this.auth.register(this.form.value).subscribe(
        () => {
          // Handle success 200 response
          this.submitted = false;
        }
    );
  }
}

В приведенном выше случае onSubmit() делает запрос к сервису и подписывается на него.

Я хочу сбросить отправленный флаг на false после завершения запроса / ответа. Легко обрабатывать успешный ответ и сбрасывать представленный флаг. Но так как ошибки обрабатываются пользовательским обработчиком ошибок, как я могу сбросить submitted флаг?

Если я добавлю обработку ошибок в компонент, то пользовательский обработчик ошибок перестанет работать. Также, если я не буду использовать пользовательский обработчик ошибок, мне придется писать повторяющийся код в каждой подписке для обработки всех типов ошибок, таких как 403, 404, 500 и т. Д.

Answer 1

Предполагая, что вы используете rxjs 6, возможно, вы могли бы использовать finalize который запускается после ошибки / успеха, так что-то вроде этого:

this.auth.register(this.form.value).pipe(
  finalize(() => this.submitted = false)
)
.subscribe(() => {
  // handle succecss 200 response
})