Angular Ionic 输入立即被“触动”答案

【问题标题】：Angular Ionic input instantly gets "touched"Angular Ionic 输入立即被“触动”
【发布时间】：2021-09-07 17:50:36
【问题描述】：

我试图在用户将标题输入留空时显示错误消息，但错误消息会立即出现。

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

【问题讨论】：

标签： html css angular forms ionic-framework

【解决方案1】：

尝试使用dirty，而不是触摸。

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

【讨论】：

【解决方案2】：

顾名思义，只要访问控件，touched 就是true。很可能您正在寻找dirty。输入值改变时设置为true。

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

请参阅Track Control States 了解更多信息。

【讨论】：

【解决方案3】：

对于已使用输入的字段，您需要 ng-dirty。触摸表示它已被用户聚焦。

【讨论】：