使用Angular时应使用哪种形式的表单验证？

Question

每个人，我对HTML5验证和Angular Form验证感到困惑。

我想知道在验证HTML5表单或angular自己的表单验证方法时应使用哪种验证。

也请考虑解释：

  

为什么和为什么不

     

哪个更好

     

哪个更安全。

Answer 1

那是两个完全不同的东西。

一方面，您具有HTML验证。例如：

<input type="number" name="hour" min="0" max="23">

这是便捷性验证：如果单击箭头以增加值，则不会低于0或高于23。但是没有什么会阻止您输入25。

接下来，您将进行Angular的表单验证。例如，对于反应形式

this.form = this.formBuilder.group({
  hours: ['', [Validators.max(23), Validators.min(0)]]
});

这是技术验证：Angular会检查您对表单进行的每次更改后表单是否有效。

您可以使用this.form.valid和this.form.invalid获取表单的状态。

如果仅依靠HTML，则将依靠浏览器的能力来检查验​​证。而且它们还没有那么先进。另外，您的用户将能够编辑DOM并简单地覆盖您的验证。

在每种情况下，当您使用Angular时，都应同时使用HTML验证和Angular的表单验证。前一种用于用户体验，后一种用于您的业务规则。