CODEWITHSUNDEEP
angular
Montaser Mohtaseb
Montaser Mohtaseb

Reputation: 43

change doesn't work in reactive form for select

I am working on Angular2 project, and i need to set (change) event in select inside reactive form but it doesn't work. What should I do?

Here the code 

 <div class="form-group">
    <select class="form-control" (change)="changeClassesLevel()" formControlName="ClassesLevel" >
      <option *ngFor="let level of classesLevels" [value]="level.Id">{{ level.Level }}</option>
    </select>
  </div>

In Angular : 

 changeClassesLevel(){
      console.log("Hit");
    }

Upvotes: 2

Views: 8998

Answers (1)

ihist
ihist

Reputation: 106

I tested it out. Works fine.

component.html

<form [formGroup]="classesLevelsForm">
  <div class="form-group">
    <select class="form-control" (change)="changeClassesLevel($event.target.value)" formControlName="ClassesLevel">
     <option *ngFor="let level of classesLevels" [value]="level.Id">{{ level.Level }}</option>
   </select>
  </div>
</form>

component.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class Component {

    classesLevels: any = [];
    classesLevelsForm: FormGroup;

    constructor() {
       this.classesLevelsForm = new FormGroup({
         ClassesLevel: new FormControl(null)
       }); 

       this.classesLevels = [{ Id: 1, Level: 10 },{ Id: 2, Level: 2 } ]; 
    }

    changeClassesLevel(id: number) {
      console.log("Hit");
      console.log(id);
    }

}

Upvotes: 3

Related Questions