HTML5必需屬性在Angular 2項目中不起作用，使用CLI安裝

Question

我正在開發Angular 2登錄頁面，當我嘗試使用HTML 5 validate屬性驗證輸入字段時，它不起作用，在快速啟動項目中它可以正常工作。 任何人都可以解釋為什么它不起作用以及如何解決這個問題？

我的代碼的Plunker鏈接在Plunker中，它驗證但在我的項目中它不起作用。

app.component.html代碼如下，

<form class="login-form">
  <input type="text" name="usrname" placeholder="Username"  required/>

  <input type="password" name="pwd" placeholder="Password"  required>
  <input type="submit">

</form>

Answer 1

從版本4.0.0開始，Angular會自動向表單添加“novalidate”。 使用以下命令更改此新的默認行為：

<form ngNativeValidate>...</form>

Github問題在這里： https ： //github.com/angular/angular/issues/15531#issuecomment-289555359

Answer 2

     <form class="login-form" novalidate> 
    <input type="text" name="usrname" placeholder="Username" required="required"> 
<input type="password" name="pwd" placeholder="Password" required="required"> 
<button type="submit">Submit </button> 
    </form> 

從表單標記中刪除novalidate以啟用html5驗證

<form class="login-form" >

如果您在表單標記中使用novalidate，則驗證不會發生，因為當您不希望默認的html5驗證並且您想要實現自己的驗證意味着您必須使用novalidate時，novalidate關鍵字就是需要它