Angular 4：表单中不允许使用 ngNativeValidate

Question

我正在使用 Angular 4 构建表单，而 required 属性不起作用。我尝试按照许多答案的建议添加<form ngNativeValidate>...</form>，但我得到了：

此处不允许使用属性 ngNativeValidate。

这是我的代码：

<form #f="ngForm" (ngSubmit)="submit()" ngNativeValidate>
      <div class="form-group input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

      <input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email"  required/>
      </div>
  <div class="form-group">
        <button type="submit" class="btn btn-def btn-block">Submit</button>
          </div>
        </form>

Answer 1

尝试替换这个：<input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>

用这个：<input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>

所以你所有的代码应该是这样的：

<form #f="ngForm" (ngSubmit)="submit()">
  <div class="form-group input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

  <input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email"  required/>
  </div>
  <div class="alert alert-danger" role="alert" *ngIf="!email.valid  && email.touched" >
    <span *ngIf="!email.valid"> This field is required</span>
 </div>
<div class="form-group">
    <button type="submit" class="btn btn-def btn-block">Submit</button>
      </div>
    </form>

同时删除不必要的 ngNativeValidate，它现在应该可以工作了。