停止在Angular js中的HTML表单中的Select属性上自动提交表单

Question

我正在制作一个表单，用户可以选择自己的分支。

这是我的表格-

<form method="post" [formGroup]="formData" (click)="dataSubmit()" >
      <div class="form-group">
        <label for="branch">Select Branch</label>
        <select [formControl]="branchControl" class="form-control" id="branch">
          <option value="cs">CS</option>
          <option value="it">IT</option>
          <option value="me">ME</option>
          <option value="ece">ECE</option>
          <option value="civil">CIVIL</option>
          <option value="ene">ENE</option>
          <option value="eie">EIE</option>
        </select>
      </div>
</div>

问题是当我选择任何分支时，它会自动提交分支，而无需单击提交按钮。

如何停止。请帮助

Answer 1

在按钮上应用点击事件时有效

<button (click)="dataSubmit()" type="submit"></button>

Answer 2

您使用的是Angular2 +，而不是AngularJS，这里是form tutorial。选择分支时提交表单的原因是由于以下代码：

<form method="post" [formGroup]="formData" (click)="dataSubmit()" >

(click)="dataSubmit()"告诉angular如果单击表单中的任何内容，则提交表单。将其替换为：(ngSubmit)="dataSubmit()"

您现在可以将按钮更改为：

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

现在，仅当您单击按钮时才会提交表单。