如何验证具有不同字段的表格内的模板驱动表单?

Question

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

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

页.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>

Answer 1

试试下面的代码。

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