最简单的例子永远不起作用。 我使用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),但经过几个小时我无法找到解决方案,这就是我找你的原因。我知道这是在我的脸上,但不知怎的,我无法看到它。
答案 0 :(得分:21)
@Fredrik回答是对的。
使用模板驱动方法时,Angular会自动将novalidate
属性添加到表单中。这就是为什么你不能阻止提交。
但是如果您想要浏览器验证,请在表单中添加ngNativeValidate
属性。
<form ngNativeValidate>
<input type='text' name='projectName' [(ngModel)]='projectName' required >
<input type='submit' value='submit' />
<form>
答案 1 :(得分:3)
使用模板驱动方法时,Angular会自动将novalidate
属性添加到表单中。这就是为什么你不能阻止提交的原因。
您可以使用form.valid
查看整个表单是否有效,然后根据您的处理方式创建自己的逻辑。
答案 2 :(得分:2)
您错过了输入元素的[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
建议的角度形式验证