[Ionic v4.0.0-beta.7] ion-select form control dirty

[matthew-valenti]

Bug Report

Ionic:
   ionic (Ionic CLI)          : 4.1.1 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

System:
   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Bug
The ion-select component form.controls.myname.dirty is true by default. It should be false by default. The same code behaves correctly in Ionic 3.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create blank project.
2. Add a simple reactive form with one ion-select control.
3. Add a validation message (and if condition).
4. Validation message displays by default. Should be hidden by default.

Related Code

html

<ion-header>
    <ion-toolbar>
        <ion-title>select</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit($event)">

        form.controls.languageCode.invalid={{form.controls.languageCode?.invalid}}<br />
        form.controls.languageCode.dirty={{form.controls.languageCode?.dirty}}<br />
        form.controls.languageCode.touched={{form.controls.languageCode.touched}}<br />
        ngForm.submitted={{ngForm.submitted}}<br />

        <ion-item>
            <ion-label class="select">Language Code</ion-label>
            <ion-select formControlName="languageCode">
                <ion-select-option *ngFor="let language of languages" value="{{language.id}}">{{language.name}}</ion-select-option>
            </ion-select>
        </ion-item>
        <ion-item *ngIf="form.controls.languageCode.invalid && (form.controls.languageCode.dirty || form.controls.languageCode.touched || ngForm.submitted)">
            <p>Language is required.</p>
        </ion-item>
        <div class="button-container">
            <button ion-button type="submit">Submit</button>
        </div>
    </form>
</ion-content>

ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-select',
  templateUrl: './select.page.html',
  styleUrls: ['./select.page.scss'],
})
export class SelectPage implements OnInit {

    private form: FormGroup;
    private languages = JSON.parse('[{"id":"en", "name":"English"}, {"id":"es", "name":"Spanish"}]');

    constructor(
        public formBuilder: FormBuilder,
    ) {}

    ngOnInit() {

        this.form = this.formBuilder.group({
            languageCode: ['', Validators.compose([Validators.required])]
        });
    }

    private submit(): void {

        if (this.form.valid) {
            console.log('okay!');
        }
    }
}

module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { SelectPage } from './select.page';

import { ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
    {
        path: '',
        component: SelectPage
    }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes),
        ReactiveFormsModule
    ],
    declarations: [SelectPage]
})
export class SelectPageModule { }

Expected Behavior
The ion-select dirty value should be false by default.

[paulstelzer]

Thanks for the issue! Are you still seeing this problem in latest, 4.0.0-beta.17?

[LautaroLorenz]

I have the latest version and the problem continues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.