Angular 4启用HTML5验证

Question

我想在Angular 4中使用HTML5验证，而不是基于其形式的验证/反应验证。我想在浏览器中保持验证运行。

它曾经在Angular 2中工作，但是自从我升级以来，即使手动创建的表单也没有任何角度指令可以使用HTML5进行验证。

例如，这根本不会在浏览器中验证：

<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

Answer 1

Angular4会自动为表单添加novalidate属性。

要覆盖它，您可以将ngNativeValidate指令添加到表单。

<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

不幸的是我还没有在文档中看到这一点，但通过查看源代码找到了它： https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts

似乎还在表单中添加ngNoForm与ngNativeValidate具有相同的效果，具体取决于您因任何原因需要声明某些内容而不是表单的用例。

希望这有帮助。

Answer 2

在表单中使用mvn versions:set -DremoveSnapshot 或ref object reference = ref some_var; ref reference = ref other_var;

ngNoForm