时间戳

首页 > 解决方案 > 如何验证具有不同字段的表内的模板驱动表单？

angularjs - 如何验证具有不同字段的表内的模板驱动表单？

问题描述

在我的 ionic-angular 应用程序中，我使用的是模板驱动的表单，当我在不触摸输入字段的情况下提交表单时，它应该显示错误消息，但在这种情况下，我无法在跨度中显示错误消息。

您可以看到写入错误消息的注释。如何验证此表格？

页面.html

  <form (ngSubmit)="submitForm()" #form="ngForm">
    <table>
    <tr>
    <td>
    <ion-input type="text" #c1 [(ngModel)]="c" name="c" required>
    </td>

    <td>
    <ion-input type="text" #c2 [(ngModel)]="d" name="d" required>
    </td>
    </tr>
    </table>

    <span *ngIf="c1.pristine && c2.pristine && form.submitted">Plese enter codes</span> //error-message is not printing.

    <button type="submit">Submit</button>
    </form>

标签： angularjsionic-frameworkionic2ionic3

解决方案

试试下面的代码。

<form (ngSubmit)="submitForm()" #form="ngForm" novalidate>
<table>
<tr>
  <td>
    <ion-input type="text" [(ngModel)]="c" name="c" id="c1" #c1="ngModel" required>
    <div [hidden]="!(c1.invalid && c1.touched)">Invalid.</div>
  </td>
  <td>
    <ion-input type="text" [(ngModel)]="d" name="d" id="c2" #c1="ngModel" required>
    <div [hidden]="!(c2.invalid && c2.touched)">Invalid.</div>
  </td>
</tr></table><button type="submit" [disabled]="!form.form.valid">Submit</button></form>

推荐阅读