Angular 4 启用 HTML5 验证答案

【问题标题】：Angular 4 enable HTML5 validationAngular 4 启用 HTML5 验证
【发布时间】：2017-08-28 14:22:44
【问题描述】：

我想在 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>

【问题讨论】：

标签： html angular

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

希望这会有所帮助。

【讨论】：

救救我的生命！！
当我有<form name="componentForm" ngNativeValidate #componentform="ngForm" (ngSubmit)="saveComponent()" autocomplete="off">这样的表单时，它不适用于模式字段
ngNativeValidate validate 不会停止执行提交按钮上的单击处理程序 (FormsModule)

【解决方案2】：

在您的表单中使用ngNoForm 或ngNativeValidate

<form ngNoForm/ngNativeValidate>
...
</form>

【讨论】：