typescript 需要的角度验证不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44213789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular validation with Required not working
提问by Grokku
Simplest example ever not working. I generated an Angular 4 application using the Angular CLI v1.0.6, changed the content of app.component.html to:
最简单的例子永远不起作用。我使用 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>
And the content of app.component.ts to:
并将 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);
}
}
I expected the submit function to not be fired in case I didn't supply an email, but it does. What did I miss?
如果我没有提供电子邮件，我希望提交功能不会被触发，但确实如此。我错过了什么？
P.S.: I have looked around for examples (e.g.: https://scotch.io/tutorials/angular-2-form-validation), but after many hours I am unable to find a solution, that's why I come to you. I know it is in my face, but somehow I can't see it.
PS：我已经环顾四周寻找示例（例如：https: //scotch.io/tutorials/angular-2-form-validation），但几个小时后我无法找到解决方案，这就是我来找你的原因。我知道它就在我的脸上，但不知何故我看不到它。
采纳答案by Fredrik Lundin
Angular adds the novalidateattribute to your forms automatically when using the template driven approach. That's why you're not prevented from submitting.
novalidate当使用模板驱动的方法时，Angular 会自动将属性添加到你的表单中。这就是为什么您不会被阻止提交的原因。
You can use form.validto see if the whole form is valid, and then create your own logic around how you want to handle it.
您可以使用form.valid查看整个表单是否有效，然后围绕您想要的处理方式创建自己的逻辑。
回答by Dalvik
@Fredrik answer is right.
@Fredrik 回答是对的。
Angular adds the novalidateattribute to your forms automatically when using the template driven approach. That's why you're not prevented from submitting.
novalidate当使用模板驱动的方法时，Angular 会自动将属性添加到你的表单中。这就是为什么您不会被阻止提交的原因。
But if you want browser validation then add ngNativeValidateattribute in your form.
但是如果你想要浏览器验证，那么ngNativeValidate在你的表单中添加属性。
<form ngNativeValidate>
<input type='text' name='projectName' [(ngModel)]='projectName' required >
<input type='submit' value='submit' />
<form>
回答by Ala Abid
The above answers are right, you just have to add ngNativeValidateto the form tag. I would like to add that if you want the submit button to not perform the (click)action when the form is not valid, use form.checkValidity()
上面的答案是对的，你只需要添加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>
回答by Gangadhar JANNU
You missed [ngModel]attribute on your input element. Just add []or [()]to ngModel attribute it will work as expected.
您错过[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.
You can do form validations either by HTML5 Validations or angular validations.
您可以通过 HTML5 验证或角度验证进行表单验证。
If you want HTML5 validations you can use ngNativeValidateas suggested by @RahulMishra
如果您想要 HTML5 验证，您可以ngNativeValidate按照@RahulMishra 的建议使用
or
或者
you can use angular form validations as suggested by @Fredrik Lundin
您可以按照@Fredrik Lundin 的建议使用角度表单验证
