html - Angular 4 启用 HTML5 验证

Question

我想在 Angular 4 中使用 HTML5 验证，而不是他们基于表单的验证/响应式(Reactive)验证。我想让验证在浏览器中运行。

它曾经在 Angular 2 中工作，但自从我升级后，如果没有任何使用 HTML5 进行验证的 Angular Directive(指令)，我什至无法获得手动创建的表单。

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

<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 具有相同的效果，具体取决于您出于任何原因需要将某些内容声明为非表单的用例。

希望这对您有所帮助。