angular - Inmatningsvalidering på ionic sökfält?

Jag använder Ionic@3 searchbar i projektet och vi vill göra inmatningsvalidering på den, till exempel min-längd och viss mönstermatchning. Jag förstår att Angular tillhandahåller vissa inmatningsvalidatorer för validering, men dessa gäller endast för inmatningstyper och inte för ionic searchbar (även om searchbar omsluter ett inmatningselement).

Hur gör jag inmatningsvalidering på Ionic searchbar?

Svar #1

Tja, eftersom sökfältet omger inmatningen, kan du hantera de valideringarna i komponentkoden. Ta en titt på denna fungerande plunker.

I demon har jag lagt till en kontroll inuti getItems-metoden, för att kontrollera längden på det sökta värdet:

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

Du kan också lägga till några andra valideringar för att matcha ett mönster och så vidare. Återigen, jag tycker att detta är det renaste sättet att göra det på eftersom sökfältet omsluter inmatningen och att försöka komma åt den inmatningen skulle vara mer som en hackig lösning.

Visa

<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>

Komponent

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;

    }
  }
}

Svar #2

Kolla Demo: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: