Ошибка отображения углового материала при возврате статуса запроса http 404

Question

У меня проблемы с поиском способа сделать это.Я хочу отобразить ошибку mat в моей форме ввода при сбое запроса http get (status = 404).

У меня есть форма поиска, и каждый раз, когда пользователь ищет что-то, чего не существует, я хочучтобы отобразить ошибку в мате, сообщающую пользователю, что его поиск недействителен.

Вот мой код на стороне клиента:

rest.service.ts

private extractData(res: Response) {
  let body = res;
  return body || { };
}

getOrder(id): Observable<any> {
  return this.http.get(endpoint + 'orders/' + id, httpOptions).pipe(
    map(this.extractData));
}

getReturns(): Observable<any> {
  return this.http.get(endpoint + 'returns', httpOptions).pipe(
    map(this.extractData));
}

MyComponent.component.ts

Здесь у меня есть функция getReturnByOrderID, которая проверяет, являются ли данные ответа пустыми или нет.Если этого не произойдет, я открою диалоговое окно, которое приведет меня к какой-то другой части моего сайта, однако, если оно пустое, я должен предупредить пользователя о том, что то, что он искал, не существует.

Я также использую функцию getErrorMessage () для обработки всех ошибок формы.

private inputForm = new FormControl('', [Validators.pattern(/^\d+$/)]);

constructor(public rest: RestService, private route: ActivatedRoute, private router: Router, public dialog: MatDialog) { }

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
        //if 404, do something here
      }
    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}

openDialog(el) {
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '70%',
    data: el
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log(`Dialog result: ${result}`);
  });
}

getErrorMessage() {
  return this.inputForm.hasError('pattern') ? 'Insert numeric value!' : '';
  // if the get request fails I'd have a message here saying "The order you searched for doesn't exist!"
}

MyComponent.component.html

<div class="row">
  <div class="col-2"></div>
  <div class="col-8">
    <mat-form-field class="search-form-field" appearance="outline">
      <mat-label>Search</mat-label>
      <input matInput class="search-input" placeholder="Search" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="inputForm?.invalid">{{ getErrorMessage() }}</mat-error>
      <mat-hint>Insert an order ID.</mat-hint>
    </mat-form-field>
    <span matSuffix>
      <button mat-raised-button class="search-btn" color="accent" [disabled]="inputForm?.invalid" (click)="getReturnByOrderId(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="col-2"></div>
</div>

Я не уверенесли мой серверный код будет полезен, если кому-то понадобится, я отредактирую свой вопрос ...

Есть предложения, как мне этого добиться?Спасибо за помощь!

Answer 1

Когда сервер возвращает код состояния 404, в этом случае ваш блок подписки не будет выполнен. поэтому вам нужно написать блок ошибок, в котором вы можете обработать ошибку 404 и установить недопустимую форму, как показано ниже.

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
         // if data is empty show 
        this.inputForm.setErrors({ 'invalid': true });
      }
    }, error => {
        //when 404 error 
        this.inputForm.setErrors({ 'invalid': true });

    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}

Надеюсь, это поможет!