CODEWITHSUNDEEP
javascriptangular
dedypuji
dedypuji

Reputation: 105

Angular2 detect OnChange

i have code select option on angular2 like this

<div class="form-group">
    <label for="government">Provinsi</label>
    <select class="form-control" name="provinsi" formControlName="provinsi">
      <option *ngFor="let item of province" value="{{item.id}}" (ngModelChange)="onChange($event)">{{item.name}}</option>
    </select>
  </div>
  <div class="form-group">
    <label for="government">Kabupaten/Kota</label>
    <select class="form-control" name="kokab" formControlName="kokab">
      <option *ngFor="let list of regencieslist" value="{{list.id}}" selected="selected">{{list.name}}</option>
    </select>
  </div>

What i want is. if i select the option of Provinsi select form it will trigger some method with value in it. how to trigger method on change with value pass to it

onChange(id){
      this.servicedev.getregencies(id).subscribe(
        regencies => this.regencieslist = regencies,
        error => error
      )
    }

i wanna trigger the onchange method and pass the value from provinsi select to the id onChange method.

Upvotes: 0

Views: 8549

Answers (1)

Fals
Fals

Reputation: 6839

The ngModelChange works with ngModel, where you specify how you could handle the changing for the binding property. Looks like your issue is simple, you need the change event, from html select:

<select 
  class="form-control" 
  name="provinsi" 
  formControlName="provinsi" 
  (change)="onChange($event)">
  <option *ngFor="let item of province" value="{{item.id}}" >{{item.name}}</option>
</select>

onChange(event){
  if(event.target.value === /*something*/) {
    this.servicedev.getregencies(id).subscribe(
      regencies => this.regencieslist = regencies,
      error => error)
  }
}

Upvotes: 1

Related Questions