需要的角度验证不起作用

Question

最简单的例子没有用。 我使用 Angular CLI v1.0.6 生成了一个 Angular 4 应用程序，将 app.component.html 的内容更改为：

<form #form='ngForm' (ngSubmit)='submitForm(form.value)'>
  <input type='email'
  class='form-control' placeholder='E-mail' name='userEmail' ngModel required >
  <button type='submit'>Submit</button>
</form>

而app.component.ts的内容为：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  submitForm(data){
    console.log(data);
  }
}

如果我没有提供电子邮件，我希望提交功能不会被触发，但确实如此。 我错过了什么？

P.S.：我已经四处寻找示例（例如：https://scotch.io/tutorials/angular-2-form-validation），但经过数小时后我无法找到解决方案，这就是我来找你的原因。我知道它在我的脸上，但不知何故我看不到它。

Answer 1

@Fredrik 的回答是正确的。

Angular 在使用模板驱动方法时会自动将novalidate 属性添加到您的表单中。这就是为什么您不会被阻止提交的原因。

但如果您想要浏览器验证，请在表单中添加 ngNativeValidate 属性。

  <form ngNativeValidate>
       <input type='text' name='projectName' [(ngModel)]='projectName' required >
       <input type='submit' value='submit' />
 <form>

Answer 2

上面的答案是对的，你只需在表单标签中添加ngNativeValidate即可。我想补充一点，如果您希望提交按钮在表单无效时不执行(click) 操作，请使用form.checkValidity()

<form ngNativeValidate #form >
   <input type="text" required/>
   <button name="submit"  type="submit" (click)="form.checkValidity()? login() : null">
          Sign In
   </button>
</form>

Answer 3

Angular 在使用模板驱动方法时会自动将novalidate 属性添加到您的表单中。这就是为什么您不会被阻止提交的原因。

您可以使用form.valid 查看整个表单是否有效，然后围绕您希望如何处理它创建自己的逻辑。

Answer 4

您错过了输入元素上的[ngModel] 属性。只需将 [] 或 [()] 添加到 ngModel 属性，它就会按预期工作。

[] is used to give input to angular.
[()] is called as banana in box syntax and enables two way data binding for input elements.

您可以通过 HTML5 验证或角度验证来进行表单验证。

如果您想要 HTML5 验证，您可以按照 @RahulMishra 的建议使用 ngNativeValidate

或

您可以按照@Fredrik Lundin 的建议使用角度表单验证

演示

HTML5 Validation
Angular validation