在表单上的函数提交作品只有一次[角度]

Question

我已经做了一个搜索产品应用程序，在那里我有三个字段，我想从其中搜索产品。在提交时，调用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" class="form-inline">
        <div class="row">
            <div class="col-4">
                <div class="mb-3">
                    <label for="product-code" class="form-label">Product Code: </label>
                    <input type="text" class="form-control" id="product-code" name="product-code" formControlName="productCode">
                </div>
            </div>
            <div class="col-4">
                <div class="mb-3">
                <label for="name" class="form-label">Name: </label>
                <input type="text" class="form-control" id="name" name="name" formControlName="name">
                </div>
            </div>
            <div class="col-4">
            <div class="mb-3">
                <label for="brand" class="form-label">Brand: </label>
                <input type="text" class="form-control" id="brand" name="brand" formControlName="brand">
            </div></div>
            
        </div>
        <div class="row">
            <div class="col-2 mb-3">
                <button type="submit" class="btn btn-primary mb-3">Search</button>
                <button type="button" class="btn btn-warning" (click)="filterAnother()">Search Another</button>

            </div>
           
            <div class="col-10 mb-3" *ngIf="isAuthenticated();">
                <div class="row">
                    <div class="col-2">
                        
                    </div>
                    <div class="col-2">
                        <button type="button" class="btn btn-success mb-3" (click)="filterByPrice()">Filter by Price</button>

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

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

我的UI是这样的-

​

我尝试添加另一个按钮，搜索另一个按钮，以运行函数单击，但仍然不工作。

Answer 1

在第一个if函数中，检查所有输入是否为null：

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

更新：

您可以执行以下操作，因为只有在键入名称时才进行搜索：

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

因此，如果您只搜索空，您将不会从您的服务得到一个响应，我想。您还将在第二个if中执行相同的检查，只需使用不同的逻辑：

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

更新：

您可以选择以下操作，因为只要输入了名称和品牌，就可以进行搜索：

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

您的第三个if函数可以工作，因为您正在确保它们都存在，使用这个逻辑，您应该能够搜索，但是只有当所有3个输入都有值时，您才可以尝试下面的链接：

if (name && brand && productCode)

我在StackBlitz中复制了您的代码，看起来您需要改进第一个2 if语句逻辑，这样当只有一个值(或2个)被传递给reproduced时，您就可以正确地搜索。下面是StackBlitz链接，如果您想查看它：https://stackblitz.com/edit/angular-ivy-ywlaqz?file=src/app/app.component.ts。