ion-searchbar 与 FormGroup 仅在插入的值为 minLength (3) 时进行搜索

Question

我正在尝试制作一个在插入的值大于或等于 3 之前不进行搜索的

但是我尝试的方法没有成功

:(

首页.page.html

<form [formGroup]="search">
    <ion-searchbar formControlName="ionSearch" [debounce]="500"
    (ionInput)="handleInput($event)" placeholder="Search product"></ion-searchbar>
  </form>

首页.page.ts

ngOnInit() {
    this.makeForm();
  }

makeForm() {
    this.search = new FormGroup({
      ionSearch: new FormControl("", Validators.minLength(3))
    });
  }

Answer 1

你的意思是这样吗？我只是检查长度是否大于或等于三并执行过滤！

  handleInput(event) {
    const query = event.target.value.toLowerCase();
    if (query.length >= 3) {
      this.results = this.data.filter(
        (d) => d.toLowerCase().indexOf(query) > -1
      );
    } else {
      this.results = this.data;
    }
  }

Stackblitz 演示