0

Basically what I want to achieve is to have a form that has two fields, the first one asks (for example) for the continent with already-loaded options, and the second one is initially empty and asks to select the country, and the list of all countries is loaded after selecting a component from first field.

My program runs on Angular2 framework.

I have tried ng2-selectize and react-jsonschema-form in order to achieve this, but I can't find a solution so far even though I have tried to read carefully the documentations. Or maybe since I'm a rookie in programming, I'm missing something here? Could anyone list all the packages that you know of that can help solve this task? Would be great if it comes with a documentation detailing the configuration.

Gerry
  • 176
  • 1
  • 11

2 Answers2

1

Maybe this is not so complicated and can be done by hand.

 <select [(ngModel)]="selectedContinent" (ngModelChange)="onContinentChange()">
   <option *ngFor="let continent of continents" [ngValue]="continent">
   {{ continent }}
   </option>
 </select>
 <select *ngIf="selectedContinent && countries" [(ngModel)]="selectedCountry">
   <option *ngFor="let country of countries" [ngValue]="country">
   {{ country }}
   </option>
 </select>

At first step only continent combo-box is visible and after choosing it onContinentChange() is fired and Javascript part of component fetches available countries which enable the second part.

For more details about select in Angular 2 see https://stackoverflow.com/a/35945293/8490932.

SirWojtek
  • 338
  • 5
  • 15
0

you can use *ngIF. first have a flag value.then if the continent is selected,then check using *ngIf.

Ashokkumar Ramasamy
  • 144
  • 5