How to use FormControl statusChanges in angular2?

Question

i am new to angular2 and i want to trigger a function when the user selects some value in a dropDown. So i tried to implement statusChange of the FormControl class but it is not getting triggered,

wonder how and when to use the statusChange in angular2 this is my code

class policy{
 subCategory: FormControl = new FormControl();
 ngOnInit() {
            this.subCategory.statusChanges.subscribe(
                s => {
                    alert('success');
                }, e => {
                    alert('error');
                }, () => {
                    alert('complete');
                }
            );
        }
}

I thought by implementing statusChanges i can trigger the success function on every change of value on the dropdown, obviously it is now working.

UPDATE 1

I have updated the plunkr

Answer 1

As the comments stated, you probably wanted valueChanges instead. However, for the thousands of other folks who arrived here from searching for how statusChanges works, here you go:

this.subCategory.statusChanges.subscribe( (status) => {
  console.log(status); //status will be "VALID", "INVALID", "PENDING" or "DISABLED"
})

The docs describe those 4 possible values as follows:

• VALID: This control has passed all validation checks.
• INVALID: This control has failed at least one validation check.
• PENDING: This control is in the midst of conducting a validation check.
• DISABLED:This control is exempt from validation checks. These status values are mutually exclusive, so a control cannot be both valid AND invalid or invalid AND disabled.

Answer 2

In Reactive forms valueChanges and statusChanges both looks very similar but serves two different purposes.

statusChanges

statusChanges is a property of AbstractControl that emits an event every time when the validation status of the control is recalculated. There are few statuses which is explained in the other answer

valueChanges

valueChanges is a property of AbstractControl that emits an event every time when the value of control changes either using UI or programmatically.

Therefore valueChanges comes useful to do saving when the form is dirty etc.

Hint: Property of AbstractControl means you can attach these events to either FormControl, FormArray or FormGroup

Example: component.html

<form [formGroup]="form">
    <h2 class="text-center">Registration Form</h2>
    <br>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="first Name" formControlName="firstName">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="last Name" formControlName="lastName">
    </div>
    <div class="form-group">
        <input type="email" class="form-control" placeholder="email" formControlName="email">
        <span *ngIf="form.controls['email']?.errors?.required">This field is required</span>
    </div>

    <br>
    <div *ngIf="form.valid">
        Valid form
    </div>
</form>

component.ts

ngOnInit() {
    this.form = this.fb.group({
        firstName: ['', Validators.required],
        lastName: [''],
        email: ['', Validators.required],
    });

    this.form.valueChanges.subscribe((value) => {
        console.log('valueChanges Form value ' + value);
    });

    this.form.statusChanges.subscribe((status) => {
        console.log('statusChanges Status is ' + status);
    });
}

A detailed comparison can be found here.