fix(autocomplete): add check for correct value #3585

IgniteUI · Mar 1, 2019 · 795efee · 795efee
1 parent 6ca70bb
commit 795efee
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/src/app/autocomplete/autocomplete.sample.ts b/src/app/autocomplete/autocomplete.sample.ts
@@ -3,18 +3,39 @@ import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
 import { worldInfo, attractions } from './data';
 import { IgxDialogComponent } from 'igniteui-angular';
 
+@Pipe({ name: 'contains' })
+export class AutocompletePipeContains implements PipeTransform {
+
+    public transform = (items: any[], term = '') => this.filterItems(items, term);
+
+    protected filterItems = (items: any[], term: string) =>
+        items.filter((item) =>
+            (item.name ? item.name : item).toString().toLowerCase().indexOf(term.toString().toLowerCase()) > -1)
+}
+
+@Pipe({ name: 'groupContains' })
+export class AutocompleteGroupPipeContains extends AutocompletePipeContains implements PipeTransform {
+
+    public transform = (continents: any[], term = '') => this.filterContinents(continents, term);
+
+    private filterContinents = (countries: any[], term = '') =>
+        countries.filter((continent) => this.filterItems(continent.countries, term).length > 0)
+}
 @Component({
     selector: 'app-autocomplete-sample',
     styleUrls: ['autocomplete.sample.css'],
-    templateUrl: `autocomplete.sample.html`
+    templateUrl: `autocomplete.sample.html`,
+    providers: [AutocompletePipeContains, AutocompleteGroupPipeContains]
 })
 export class AutocompleteSampleComponent {
     @ViewChild('alert', { read: IgxDialogComponent }) public alert: IgxDialogComponent;
     public travel: FormGroup;
     worldInfo;
     attractions;
 
-    constructor(fb: FormBuilder) {
+    constructor(fb: FormBuilder,
+        public containsPipe: AutocompletePipeContains,
+        public containsGroupPipe: AutocompleteGroupPipeContains) {
         this.worldInfo = worldInfo;
         this.attractions = attractions;
 
@@ -25,27 +46,13 @@ export class AutocompleteSampleComponent {
     }
 
     onSearch() {
-        this.alert.message = 'You can visit ' + Math.floor(Math.random() * 100) + ' ' + this.travel.value.attraction +
-            ' in ' + this.travel.value.country;
+        if (this.containsGroupPipe.transform(this.worldInfo, this.travel.value.country).length > 0 &&
+            this.containsPipe.transform(this.attractions, this.travel.value.attraction).length > 0) {
+            this.alert.message = 'You can visit ' + (100 + Math.floor(Math.random() * 100)) + ' ' + this.travel.value.attraction +
+                ' in ' + this.travel.value.country + '.';
+        } else {
+            this.alert.message = 'Please enter correct country and attraction.';
+        }
         this.alert.open();
     }
 }
-
-@Pipe({ name: 'contains' })
-export class AutocompletePipeContains implements PipeTransform {
-
-    public transform = (items: any[], term = '') => this.filterItems(items, term);
-
-    protected filterItems = (items: any[], term: string) =>
-        items.filter((item) =>
-            (item.name ? item.name : item).toString().toLowerCase().indexOf(term.toString().toLowerCase()) > -1)
-}
-
-@Pipe({ name: 'groupContains' })
-export class AutocompleteGroupPipeContains extends AutocompletePipeContains implements PipeTransform {
-
-    public transform = (continents: any[], term = '') => this.filterContinents(continents, term);
-
-    private filterContinents = (countries: any[], term = '') =>
-        countries.filter((continent) => this.filterItems(continent.countries, term).length > 0)
-}
diff --git a/src/app/autocomplete/data.ts b/src/app/autocomplete/data.ts
@@ -15,7 +15,7 @@ export const worldInfo = [
 
 export const attractions = [
     { id: 1, name: 'Art galleries and museums', image: 'palette'},
-    { id: 2, name: 'Buildings and structures - castles, bridges', image: 'account_balance'},
+    { id: 2, name: 'Buildings and structures (castles, bridges)', image: 'account_balance'},
     { id: 3, name: 'Monuments', image: 'terrain'},
     { id: 4, name: 'Public Art events', image: 'brush'},
     { id: 5, name: 'Botanical gardens and zoos', image: 'nature_people'},