Skip to content

Commit

Permalink
CascadeSelect added to Invalid Demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jan 19, 2021
1 parent afb92e5 commit 305d345
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 1 deletion.
87 changes: 87 additions & 0 deletions src/app/showcase/components/invalid/invaliddemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ <h1>Invalid State</h1>
<label for="multiselect">MultiSelect</label>
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value7" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiselect">CascadeSelect</label>
<p-cascadeSelect [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="ng-invalid ng-dirty"></p-cascadeSelect>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="textarea">Textarea</label>
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value9" pInputTextarea class="ng-invalid ng-dirty"></textarea>
Expand Down Expand Up @@ -91,6 +95,10 @@ <h1>Invalid State</h1>
&lt;label for="multiselect"&gt;MultiSelect&lt;/label&gt;
&lt;p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value7" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"&gt;&lt;/p-multiSelect&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="multiselect"&gt;CascadeSelect&lt;/label&gt;
&lt;p-cascadeSelect [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="ng-invalid ng-dirty"&gt;&lt;/p-cascadeSelect&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="textarea"&gt;Textarea&lt;/label&gt;
&lt;textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value9" pInputTextarea class="ng-invalid ng-dirty"&gt;&lt;/textarea&gt;
Expand All @@ -102,6 +110,8 @@ <h1>Invalid State</h1>

countries: any[];

cascadeSelectCountries: any[];

cities: any[];

filteredCountries: any[];
Expand Down Expand Up @@ -138,6 +148,83 @@ <h1>Invalid State</h1>
this.countryService.getCountries().then(countries =&gt; &#123;
this.countries = countries;
&#125;);

this.cascadeSelectCountries = [
&#123;
name: 'Australia',
code: 'AU',
states: [
&#123;
name: 'New South Wales',
cities: [
&#123;cname: 'Sydney', code: 'A-SY'&#125;,
&#123;cname: 'Newcastle', code: 'A-NE'&#125;,
&#123;cname: 'Wollongong', code: 'A-WO'&#125;
]
&#125;,
&#123;
name: 'Queensland',
cities: [
&#123;cname: 'Brisbane', code: 'A-BR'&#125;,
&#123;cname: 'Townsville', code: 'A-TO'&#125;
]
&#125;,

]
&#125;,
&#123;
name: 'Canada',
code: 'CA',
states: [
&#123;
name: 'Quebec',
cities: [
&#123;cname: 'Montreal', code: 'C-MO'&#125;,
&#123;cname: 'Quebec City', code: 'C-QU'&#125;
]
&#125;,
&#123;
name: 'Ontario',
cities: [
&#123;cname: 'Ottawa', code: 'C-OT'&#125;,
&#123;cname: 'Toronto', code: 'C-TO'&#125;
]
&#125;,

]
&#125;,
&#123;
name: 'United States',
code: 'US',
states: [
&#123;
name: 'California',
cities: [
&#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
&#123;cname: 'San Diego', code: 'US-SD'&#125;,
&#123;cname: 'San Francisco', code: 'US-SF'&#125;
]
&#125;,
&#123;
name: 'Florida',
cities: [
&#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
&#123;cname: 'Miami', code: 'US-MI'&#125;,
&#123;cname: 'Tampa', code: 'US-TA'&#125;,
&#123;cname: 'Orlando', code: 'US-OR'&#125;
]
&#125;,
&#123;
name: 'Texas',
cities: [
&#123;cname: 'Austin', code: 'US-AU'&#125;,
&#123;cname: 'Dallas', code: 'US-DA'&#125;,
&#123;cname: 'Houston', code: 'US-HO'&#125;
]
&#125;
]
&#125;
];
&#125;

searchCountry(event) &#123;
Expand Down
4 changes: 3 additions & 1 deletion src/app/showcase/components/invalid/invaliddemo.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@ import { InputTextareaModule } from 'primeng/inputtextarea';

import { AppCodeModule } from '../../app.code.component';
import { AppInputStyleSwitchModule } from '../../app.inputstyleswitch.component';
import { CascadeSelectModule } from 'primeng/cascadeselect';

@NgModule({
imports: [
CommonModule,
InvalidDemoRoutingModule,
ButtonModule,
ButtonModule,
CascadeSelectModule,
PanelModule,
TabViewModule,
InputTextModule,
Expand Down
79 changes: 79 additions & 0 deletions src/app/showcase/components/invalid/invaliddemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export class InvalidDemo {

countries: any[];

cascadeSelectCountries: any[];

cities: any[];

filteredCountries: any[];
Expand Down Expand Up @@ -44,6 +46,83 @@ export class InvalidDemo {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});

this.cascadeSelectCountries = [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},

]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},

]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
];
}

searchCountry(event) {
Expand Down

0 comments on commit 305d345

Please sign in to comment.