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

使用ngNoForm或ngNativeValidate表單中的

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