Ionic2 issue: related control is dirty on click OK event, even when value was not changed

Ionic Framework ionic-v3
1

I’m new at Ionic2 and angular2.

I use ion-select plugin. This plugin display popup with options-list by radio-buttons, and to “submit” buttons - OK and Cancel.

My ion-select element is related to form-control of the class.

The issue is, that when I open the select-box, and click OK without changing the value, the form-control state become dirty.

Here is my code:

Type script:

import { Component } from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder, FormGroup, AbstractControl} from '@angular/forms';

@Component({
 templateUrl: 'build/pages/myPage/myPage.html',
 directives: [FORM_DIRECTIVES]
})

export class MyPage {

pageForm: FormGroup;
maritalStatusEnum: Array<Object> = [{ value: 1, text: "married" }, { value: 2, text: "single" }, {value: 3, text: "penny"}, {value: 4, text: "widow/er"}]

constructor(private fb: FormBuilder) {}

ngOnInit() {
    this.pageForm = this.fb.group({
        'maritalStatus': ['1'],
         //more fields...
    });
}

onSelectChange(control) {
    if (control.dirty){
      alert('dirty');

    }

}
}

HTML:

    <ion-item>
<ion-label>marital status</ion-label>
<ion-select (ionChange)="onSelectChange(pageForm.controls.maritalStatus)" [formControl]="pageForm.controls.maritalStatus">
  <ion-option *ngFor="let option of maritalStatusEnum" [value]="option.value">{{option.text}}</ion-option>
</ion-select>
</ion-item>