Ionic 如果使用HTML模式,是否有一种方法可以访问离子输入上的表单验证?

5sxhfpxr  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(136)

我试图直接在HTML对象上使用regex模式验证一个ion输入,使其只允许0到24之间的数字。这样做非常好,如果输入了错误的数字/文本等,表单就会变红。

<ion-input [pattern]="numberPattern" #hoursInput></ion-input>

当我在 *ngFor循环中生成这些输入时,是否有一种方法可以同时访问所有输入的有效状态,以便在其中一个输入无效时禁用按钮?

<ion-list>
        <ion-item *ngFor="let project of (projectList$ | async)>
            <ion-label>{{ name }}</ion-label>
            <ion-input ...... [pattern]="numberPattern" #hoursInput></ion-input>
        </ion-item>
      </ion-list>

而我的按钮在页脚,如果输入无效,应该禁用:)
此致

6rqinv9w

6rqinv9w1#

最简单的方法是在HTML中添加以下内容:

<ion-input [(ngModel)]="disableMe"></ion-input>

  <ion-button [disabled]="disableMe <0 || disableMe >24 || !disableMe">Im the button</ion-button>

相关问题