Selects' Events In Angular2

Please, can you help me? It is supposed to be easy, but I can't find the solution. There is a form with two selects. When #select1 changes, #select2 needs to show data according to

Solution 1:

Great! I found out how to make it work! :) The only thing that was missing, was the form model passed to the event. It should be like this:

<form [ng-form-model]="userForm"><select (change)="select2.getCities($event, userForm)"ng-control="userState"><option *ng-for="#state of states" [value]="state">{{state}}</option></select>

Solution 2:

Answering with Angular 2 latest template syntax and Typescript component

//The Component Type scriptimport {Component} from 'angular2/core';
import {NgForm}    from 'angular2/common'; 

@Component({ selector: 'states-cities', 
             template: `
                    <form (ngSubmit)="onSubmit()" #heroForm="ngForm"> 
                       <select  ngControl="state" #state="ngForm" (change)="getCities(state)">
                            <option *ngFor="#state of states" [value]="state" >{{state}}</option>
                        </select>

                        <select  ngControl="userCity" #select2="ngForm">
                            <option *ngFor="#city of cities" [value]="city">{{city}}</option>
                        </select>
                      </form>
                     `


           })
export classstateCitiesComponent{

     states= ['New York', 'Pennsylvania'];
     cities = [];
     citiesData={'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']};

    getCities(state){
         this.cities=this.citiesData[state.value];
    }
}

Solution 3:

This is how I would do it on Angular 2 RC5, with a model-driven approach and Observables. This could also be a search field where you then use debounceTime() to not hit your backend on every keystroke or manipulate the input further.

//The Component Type scriptimport { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({ 
  moduleId: module.id,
  selector: 'states-cities', 
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
       <select formControlName="state">
            <option *ngFor="let state of states" [value]="state" >{{state}}</option>
        </select>

        <select  formControlName="userCity">
            <option *ngFor="let city of cities" [value]="city">{{city}}</option>
        </select>
      </form>
     `
})
export classstateCitiesComponent{

   states:Array<string>;
   cities:Array<string>;
   citiesData:any;
   myForm:FormGroup;

   constructor(private formBuilder: FormBuilder) {
     this.states = ['New York', 'Pennsylvania'];
     this.cities = [];
     this.citiesData = {'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']};
     // Setup Formthis.myForm = this.formBuilder.group({
       state: [''],
       userCity: ['']
     });

     // Now setup change detection with an Observablethis.myForm.controls["state"].valueChanges
     .debounceTime(100) // wait a litle after the user input (ms)
     .subscribe(state => {
       this.cities = this.citiesData[state];
     });

   }


  onSubmit() {
    // do something
  }
}

You can read more about change detection here.