如何在表单标签中添加点击事件

Question

我正在使用 ionic 在 typescript 中创建一个 angular2 表单，

.html

<form (ngSubmit)="verify(form)" #form="ngForm">
<ion-input type="text" name="data" #number="ngModel" maxlength='4" [(ngModel)]="digits"></ion-input>
<span *ngIf="number.dirty && form.submitted && form.value.number<4">Enter all numbers</span>
<span *ngIf="number.pristine && form.submitted">Enter number</span>

<button (click)="doAgain()">Click Again</button>

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

问题 1：当我单击“再次单击”按钮时错误消息显示为输入数字，我不想显示它也触发 verify() 函数。

更新： 问题2：我的要求是我只需要在文本框中输入数字而不需要字母和特殊字符，例如'a'、'b'、'@' .所以通过上面的实现，输入框接收到 a b c d 和 @ # $ 以及 1 2 3 任何东西。我只想将其限制为数字。我知道，因为我已将属性提供为 type="text"，所以它以这种方式运行。当我更改为 type="number" 时，我实现了目标，但输入字段接受的字符数超过了我的最大长度 4。

Answer 1

您应该添加按钮的 type

<button (click)="doAgain()" type='button'>Click Again</button>

因为 ngSubmit 将在单击表单组内的任何按钮时触发。为了区分 submit 按钮和其他按钮，我们使用 type

Read here for more information on it

Answer 2

您可以在输入字段中添加类型="tel"，

<ion-input type="tel" name="data" #number="ngModel" maxlength="4" [(ngModel)]="digits"></ion-input>

如何在表单标签中添加点击事件

How to add a click event inside the form tags

javascript

typescript

angular

angular-forms