Angular Ionic input instantly gets "touched"

Issue

I'm trying to show an error message when a user leaves the title input empty, but the error message appears instantly.

HTML

<ion-item>
        <div class="margin-bottom">
          <h5>Titel</h5>
          <ion-input
            id="title"
            class="todoTitle"
            placeholder="Titel van de taak"
            required
            ngModel
            value=""
            name="title"
            #title="ngModel"
          >
          </ion-input>
          <ion-text color="danger" *ngIf="!title.valid && title.touched">
            <p class="required">Een titel is verplicht.</p>
          </ion-text>
        </div>
      </ion-item>

CSS

.todoTitle.ng-invalid.ng-touched {
  border: 1px solid red;
}

Solution

As the name implies, touched is true as soon as the control is visited. Most probably you're looking for dirty. It's set to true when the input value changes.

<ion-text color="danger" *ngIf="!title.valid && title.dirty">
  <p class="required">Een titel is verplicht.</p>
</ion-text>

.todoTitle.ng-invalid.ng-dirty {
  border: 1px solid red;
}

See Track Control States for more info.

Answered By - Michael D