表单提交时未检查Angular4“必需”属性答案

【问题标题】：Angular4 "required" attribute is not checked on form submit表单提交时未检查Angular4“必需”属性
【发布时间】：2019-12-23 06:22:18
【问题描述】：

我非常基本的 Angular 4 表单不验证具有“必需”属性的输入（文本）字段。具有“必需”属性的输入应该由浏览器验证，就像没有 Angular 的 html 5 默认行为一样。 Angular 4 有什么变化吗？相同的代码在 Angular 2 上运行良好。

<form (ngSubmit)="onSubmit()" #testForm="ngForm">
  <input type="text" id="test1" name="test1" [(ngModel)]="test" required>
  <input type="text" id="test2" name="test2" [(ngModel)]="test" [required]="true">
  <input type="text" id="test3" name="test3" [(ngModel)]="test" [attr.required]="true">
  <button type="submit">submit</button>
</form>

试试这个 plunkr： http://plnkr.co/edit/Wow7NUhaC0KjHtOfVQ2c?p=preview

【问题讨论】：

尝试在表单上添加novalidate
这是一个很好的提示！我发现这是自 Angular4 以来的默认行为。 Angular2 下的行为不一样。

标签： html angular

【解决方案1】：

我自己找到的……

从 Angular 2 到 4 发生了变化。在 Angular 4 下，我必须设置“ngNativeValidate”，这是 Angular 2 下的默认行为。

这将与默认的 html5 验证器“必需”一起使用：

<form (ngSubmit)="onSubmit()" #testForm="ngForm" ngNativeValidate>
  <input type="text" id="test1" name="test1" [(ngModel)]="test" required>
  <input type="text" id="test2" name="test2" [(ngModel)]="test" [required]="true">
  <input type="text" id="test3" name="test3" [(ngModel)]="test" [attr.required]="true">
  <button type="submit">submit</button>
</form>

Corrected Plunkr Someones reported Angular issue which pointed me to the failure

【讨论】：

我就是这么说的，你的问题不清楚。你从来没有说过你想要本地验证。下次请尝试更具体。
什么是原生验证？您正在构建应用程序吗？
本机验证是默认行为，就像任何具有“必需”属性的普通 html 5 表单一样。因此，（现代）浏览器在输入字段填充有效输入之前不会提交表单。浏览器会向您显示必须填写哪些输入字段。

【解决方案2】：

将按钮类型更改为将提交表单的按钮，这就是问题

<button type="button">submit</button>

检查表单是否有效，直到表单有效之前禁用提交

<button type="button" [disabled]="!testform">submit</button>

【讨论】：

这正是我想要的：在 html 5 兼容的浏览器中使用预提交验证。
如果您的问题已解决，请接受答案并关闭问题

【解决方案3】：

您的问题我不清楚，但您可以在表单无效时禁用按钮。

<button type="submit" [disabled]="!testForm.form.valid">submit</button>

【讨论】：