在商品名稱和商品價格以及商品類別都輸入或者選擇合法的情況下才能進行搜尋。

一.product.service.ts新增一個新的方法，獲取所有商品類別

getAllCategories():string[]{
        return ["電子產品", "硬體裝置", "其他"];
    }

二.使用響應式表單實現效果，所以建一個表單的資料模型
search.component.ts

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators, FormControl} from "@angular/forms"
 
;
import {ProductService} from "../shared/product.service";

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

    formModel: FormGroup;

    categories:string[];

    constructor(private
 
 productService:ProductService) {
        let fb = new FormBuilder();
        this.formModel = fb.group({
            title: ['', Validators.minLength(3)],
            price: [null,this.positiveNumberValidator],
            category: ['-1']
        });
    }

    ngOnInit() {
        this.categories =this
 
.productService.getAllCategories();
    }

    positiveNumberValidator(control: FormControl): any {
        if (!control.value) {
            return null;
        }
        let price = parseInt(control.value);

        if (price > 0) {
            return null;
        }else {
            return {positiveNumber:true};
        }
    }

    onSearch(){
        if (this.formModel.valid){
            console.log(this.formModel.value);
        }
    }
}

三.把資料模型與HTML元素連結
search.component.html

<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
  <!--novalidate:禁用瀏覽器驗證的預設行為-->
  <div class="form-group" [class.has-error]="formModel.hasError('minlength','title')">
    <label for="productTitle">商品名稱</label>
    <input formControlName="title" type="text" id="productTitle" placeholder="商品名稱" class="form-control">
      <span class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">
          請至少輸入3個字
      </span>
  </div>

  <div class="form-group" [class.has-error]="formModel.hasError('positiveNumber','price')">
    <label for="productPrice">商品價格</label>
    <input formControlName="price" type="number" id="productPrice" placeholder="商品價格" class="form-control">
      <span class="help-block" [class.hidden]="!formModel.hasError('positiveNumber','price')">
          請輸入正數
      </span>
  </div>

  <div class="form-group">
    <label for="productCategory">商品類別</label>
    <select formControlName="category" id="productCategory" class="form-control">
        <option value="-1">全部分類</option>
        <option *ngFor="let category of categories" [value]="category">{{category}}</option>
    </select>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜尋</button>
  </div>
</form>

最終效果：