角度4：表格中不允许ngNativeValidate

Question

I'm using Angular 4 to build a form and required attribute is not working. I tried adding <form ngNativeValidate>...</form> as suggested by many answers but i got :

Attribute ngNativeValidate is not allowed here.

Here is my code :

<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

try to replace this : <input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>

with this : <input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>

so all your code should look like this :

 <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> 

Also remove the unnecessary ngNativeValidate and it should work now.