CODEWITHSUNDEEP
htmlcssangularformsionic-framework
Furkan Öztürk
Furkan Öztürk

Reputation: 544

Angular Ionic input instantly gets "touched"

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

gif error

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

Upvotes: 0

Views: 1071

Answers (3)

igor_c
igor_c

Reputation: 1250

Try to use dirty instead of touched.

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

Upvotes: 1

Barremian
Barremian

Reputation: 31115

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.

Upvotes: 3

Alex
Alex

Reputation: 1072

You want ng-dirty for a field that has had the input used. Touched will indicate that it has been focused by the user.

Upvotes: 1

Related Questions