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取决于您的用例,因为无论出于何种原因需要声明某些内容不是表单.

希望这可以帮助.