表單提交上的功能僅適用一次[Angular]

我制作了一個搜索產品應用程式，其中包含我想要搜索產品的 3 個欄位。提交時，會呼叫 searchProducts() 函式，該函式會向我的 api 發送一個 get 請求，其中包含從表單欄位中獲取的請求引數。

問題 - 我的表單只能使用一次。我只能搜索一次，然后我必須重繪 頁面才能再次搜索。有時它會作業兩次，但不會更多。我不知道為什么。

每當提交表單時，我都想繼續呼叫 searchProducts() 函式。我想一次又一次地作業而不重繪 頁面，因為用戶可以多次搜索。

我的 searchProducts() 函式/組件 -

export class SearchproductComponent implements OnInit {


  isAuthenticated(){
    return this.userService.isAuthenticated();
  }

  productSearchForm = this.fb.group({
    productCode: [, []],
    name: [, []],
    brand: [, []],
    priceLow: [,[]],
    priceHigh: [, []]
  })

  get productCode(){
    return this.productSearchForm.get('productCode');
  }

  get name(){
    return this.productSearchForm.get('name');
  }

  get brand(){
    return this.productSearchForm.get('brand');
  }

  constructor(private fb: FormBuilder, public productsService: ProductsService, public userService: UserserviceService) { }

  ngOnInit(): void {
  }

  searchProducts(){

    let name = this.productSearchForm.controls.name.value!
    let brand = this.productSearchForm.controls.brand.value!
    let productCode = this.productSearchForm.controls.productCode.value!

    if (name && brand === null && productCode === null){
      let response = this.productsService.getProductsByName(name)
      console.log(response)
    }
    if (name && brand && productCode === null){
      let response = this.productsService.getProductsByNameAndBrand(name, brand)
      console.log(response)
      console.log("Name and Brand Working");
    }
    if (name && brand && productCode){
      let response = this.productsService.getProductsByNameAndBrandAndProductCode(name, brand, productCode)
      console.log(response)
      console.log("Name and Brand and Product Code Working")
    } 

它有更多的功能，但你明白了。

我的 searchProducts html 檔案 -

<div class="search-form">
    <form (ngSubmit)="searchProducts()" [formGroup]="productSearchForm" name="productSearch" >
        <div >
            <div >
                <div >
                    <label for="product-code" >Product Code: </label>
                    <input type="text"  id="product-code" name="product-code" formControlName="productCode">
                </div>
            </div>
            <div >
                <div >
                <label for="name" >Name: </label>
                <input type="text"  id="name" name="name" formControlName="name">
                </div>
            </div>
            <div >
            <div >
                <label for="brand" >Brand: </label>
                <input type="text"  id="brand" name="brand" formControlName="brand">
            </div></div>
            
        </div>
        <div >
            <div >
                <button type="submit" >Search</button>
                <button type="button"  (click)="filterAnother()">Search Another</button>

            </div>
           
            <div  *ngIf="isAuthenticated();">
                <div >
                    <div >
                        
                    </div>
                    <div >
                        <button type="button"  (click)="filterByPrice()">Filter by Price</button>

                        <button type="button"  (click)="filterAnother()">Filter Another</button>
                    </div>
                    <div >
                        <label for="price-range" >Price Range: </label>
                    </div>
                    <div >
                        <input type="text"  id="price-range-low" name="price-low" formControlName="priceLow">
                    </div>
                    <div >
                        <input type="text"  id="price-range-high" name="price-high" formControlName="priceHigh">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

我希望 searchProducts() 一次又一次地作業。它只作業一次。

我的用戶界面看起來像這樣 -

我嘗試添加另一個按鈕搜索另一個以運行功能 onclick 但仍然不起作用。

uj5u.com熱心網友回復：

在您的第一個if函式中，您正在檢查所有輸入是否為空：

if (name && brand === null && productCode === null)

更新：

您可以改為執行以下操作，因為您僅在輸入名稱時進行搜索：

if (name !== null && brand === null && productCode === null)

因此，如果您只搜索空值，我想您將不會從您的服務中得到回應。您還在 second 中進行了相同的檢查if，只是使用了不同的邏輯：

if (name && brand && productCode === null)

更新：

您可以改為執行以下操作，因為只要輸入了名稱和品牌，您就會進行搜索：

if (name !== null && brand !== null && productCode === null)

您的第三個if函式有效，因為您確保它們都存在，使用此邏輯您應該能夠搜索，但只有當所有 3 個輸入都有值時，您才能在下面的鏈接中嘗試：

if (name && brand && productCode)

我在 StackBlitz 中復制了您的代碼，看起來您需要改進前 2 個if陳述句的邏輯，以便您可以在只有一個值（或 2 個）被傳遞給角度服務時正確搜索。如果您想查看它，這里是 StackBlitz 鏈接：https ://stackblitz.com/edit/angular-ivy-ywlaqz?file=src/app/app.component.ts 。

標籤：javascript有角度的打字稿角反应形式

上一篇：升級基礎ngx正在破壞UI

下一篇：Window.print()以表單形式輸入文本-javascript,angular