html - Angular4 "required"表单提交时未检查属性

Question

我的非常基本的 Angular 4 表单不会使用“required”属性验证输入(文本)字段。具有“required”属性的输入应该由浏览器进行验证，就像没有 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

Answer 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