angular - change doesn't work in reactive form for select

Question

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");
    }

标签： angular

Answer 1

我测试了它。工作正常。

组件.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>

组件.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);
    }

}