离子搜索栏上的输入验证？

Question

我在项目中使用Ionic @ 3搜索栏，我们想对其进行输入验证，例如min-length和一些模式匹配。 我理解Angular为验证提供了一些输入验证器，但这些仅适用于输入类型而不适用于离子搜索栏（尽管搜索栏包含输入元素）。

如何在离子搜索栏上进行输入验证？

Answer 1

好吧，由于搜索栏包装了输入，您可以在组件代码中处理这些验证。请查看 this working plunker 。

在演示中，我在getItems方法中添加了一个检查，以检查搜索值的长度：

// Check the length
if(val.length < 5) {
  this.errorMessage = 'Please enter 5 characters at least...';
  return;
}

您还可以添加一些其他验证来匹配模式，依此类推。 同样，我认为这是最干净的方法，因为搜索栏包含输入并尝试访问该输入将更像是一个hacky解决方案。

查看

<ion-header>
  <ion-navbar>
    <ion-title>
      Searchbars
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <span *ngIf="errorMessage" class="error">{{ errorMessage }}</span>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

<强>组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({...})
export class HomePage {

  items;
  errorMessage;

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      'Buenos Aires',
      'Cairo',
      'Dhaka',
      'Edinburgh',
      'Geneva',
      'Genoa',
      'Glasglow',
      'Hanoi',
      'Hong Kong',
      'Islamabad',
      'Istanbul',
      'Jakarta',
      'Kiel',
      'Kyoto',
      'Le Havre',
      'Lebanon',
      'Lhasa',
      'Lima',
      'London',
      'Los Angeles',
      'Madrid',
      'Manila',
      'New York',
      'Olympia',
      'Oslo',
      'Panama City',
      'Peking',
      'Philadelphia',
      'San Francisco',
      'Seoul',
      'Taipeh',
      'Tel Aviv',
      'Tokio',
      'Uelzen',
      'Washington'
    ];
  }

  getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {

      // Check the length
      if(val.length < 5) {
        this.errorMessage = 'Please enter 5 characters at least...';
        return;
      }

      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      });

      // Clear the error message
      this.errorMessage = null;

    }
  }
}

Answer 2

查看演示：https://stackblitz.com/edit/filter-validate-ionic-2?embed=1&file=pages/home/home.ts

 In the demo, I've added a check inside of the getItems method, to check the length of 
 the searched value: