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关键字就是需要它