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

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

您可以使用form.valid查看整个表单是否有效，然后根据您的处理方式创建自己的逻辑。

Answer 3

您错过了输入元素的[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

角度验证，必需不起作用

3 个答案:

演示