Angular 如果在表单内单击任何按钮，表单字段将得到验证

Question

我的示例中有一个 Angular Material 响应式表单，其中包含一些简单的输入和验证。我内置了两个按钮：一个在 form 标签外，一个在 form 标签内。谁能告诉我为什么单击 form 内的按钮会验证整个表单？

在这种情况下如何阻止验证？

示例： https://stackblitz.com/edit/angular-ivy-m4kar5?file=src%2Fapp%2Fhello.component.html

Answer 1

因为default button attribute type是“提交”，所以您需要将按钮类型设置为按钮来实现您的要求。

<button type="button">Click me and watch everything gets validated</button>

Answer 2

表格里面的button，默认有属性type="submit"。如果 form 标签内有多个按钮，则必须指定类型 :

<form>
  <button>Submit the form</button> <!-- Default is submit -->

  <button type="button">Some random action</button>

  <button type="reset">Reset a form</button>
</form>

Angular 如果在表单内单击任何按钮，表单字段将得到验证

Angular form fields get validated if any button gets clicked inside form

forms

validation

angular