9.实战

步骤1：
产品服务加一个获取类别的方法

getAllCategories(): string[] {
    return ["电子产品","硬件","图书"];
  }

步骤2：用响应式表单实现效果，建一个数据模型

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: ['',this.positiveNumberValidator],
      category:['-1']
    });
  }
  ngOnInit() {
    this.categories = this.productService.getAllCategories();
  }
  
  positiveNumberValidator(control: FormControl):any{/*正数校验*/
    let price = parseInt(control.value);/*解析里面的值*/
     if(price <= 0 ){
       return {positiveNumber: true};/*返回一个对象*/
     }
}
  onSearch(){/*判断是不是有效，有效，打印表单值*/
    if(this.formModel.valid){
      console.log(this.formModel.value);
    }
  }

}

步骤3：链接模板

<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
  <div class="form-group">
    <label for="title">商品名称</label>
    <input formControlName="title" [class.hasError]="formModel.hasError('minlength','title')" type="email" class="form-control" id="title" placeholder="商品名称">
    <div [hidden]="formModel.get('title').valid || formModel.get('title').untouched">
    <span class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">请至少输入3个字</span>
    </div>
  </div>
  <div class="form-group" >
    <label for="price">商品价格</label>
    <input formControlName="price" type="number" [class.hasError]="formModel.hasError('positiveNumber','price')"  class="form-control" id="price" placeholder="商品价格">
    <div [hidden]="formModel.get('price').valid || formModel.get('price').untouched ">
    <span class="help-block" [class.hidden]="!formModel.hasError('positiveNumber','price')">请输入正数</span>
    </div>
  </div>
  <div class="form-group">
    <label for="productCategory">商品分类</label>
    <select [formControlName]="category" class="form-control" id="productCategory">
      <option value="-1">全部分类</option>
      <option *ngFor="let category of categories" [value]="category">{{category}}</option><!--循环出来的值绑定到下拉框-->
    </select>
  </div>
  <input class="btn btn-primary btn-sm btn-block my-2" type="submit" value="搜索">
</form>

效果：商品名称最少3个字，商品价格不能是负数，两个校验

image.png