イオン探索バーの入力検証？

Question

私はプロジェクトでIonic @ 3検索バーを使用しています。入力長の検証（たとえば、最小長とパターンマッチング）を行いたいとします。 私はAngularがバリデーションのためにいくつかの入力バリデーターを提供していると理解していますが、これらは入力タイプにのみ適用され、イオンサーチバーには適用されません（検索バーは入力エレメントをラップします）。

イオン検索バーで入力確認を行うにはどうすればよいですか？

Answer 1

検索バーが入力をラップするので、コンポーネントコードでこれらの検証を処理できます。 this working plunkerをご覧ください。

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

あなたはまた、パターンに一致する他のいくつかの検証を追加し、そうできます、私は、検索値の長さをチェックするために、getItems方法の内部チェックを追加しましたデモで

に。 また、検索バーが入力をラップし、その入力にアクセスしようとするとハックのような解決策になるので、これは最もクリーンな方法だと思います。

ビュー

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

    } 
    } 
}