當 http get 請求狀態返回 404 時顯示 Angular Material mat-error

Question

我很難找到一種方法來做到這一點。 如果 http get 請求失敗（狀態 = 404），我想在我的輸入表單上顯示一個 mat-error。

我有一個搜索表單，每次用戶搜索不存在的內容時，我都想顯示 mat-error，告訴用戶他的搜索無效。

這是我的客戶端代碼：

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 函數來檢查響應數據是否為空。 如果不是，那么我打開一個 mat 對話框，它將引導我到我網站的其他部分，但是，如果它是空的，那么我應該警告用戶他搜索的內容不存在。

我還使用 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!"
}

我的組件.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;
    });
  }
}

希望這會有所幫助！