如何在表单标签内添加点击事件答案

【问题标题】：How to add a click event inside the form tags如何在表单标签内添加点击事件
【发布时间】：2018-06-29 09:53:33
【问题描述】：

我正在使用 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" 时，我实现了目标，但输入字段接受的字符数比我的 maxlength 多，即 4。

【问题讨论】：

你能解释一下你的问题 2. 你需要的数字大小是多少？
我只需要4位数字，如果完成了4位用户将无法输入第5位
在每个按键功能的 .ts 中，您可以放置一个 if 条件，如 ( key >= 96 && key <= 105 ) 将只允许数字。
你能在答案中解释一下吗？

标签： javascript angular typescript angular-forms

【解决方案1】：

您应该添加按钮的type

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

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

Read here for more information on it

【讨论】：

哇解决了，你能告诉我问题 2 的答案，以便我接受你的答案吗？
@Aditya 很乐意为您提供帮助 :) 您还需要什么？
不，我无法在 teamviewer 中使用，我可以通过编辑问题 2 的答案来向您解释。只需一分钟
希望你明白了吗？
你有我的问题吗 2 @Aravind

【解决方案2】：

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

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

【讨论】：