HTML需要驗證被Angular忽略嗎？

Angular 4忽略了內置的html驗證。HTML需要驗證被Angular忽略嗎？

如何使Angular考慮HTML輸入元素的必填字段？

期望behaiviour：

代碼：

  <form #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#"> 
      <div class="form-group"> 
       <input type="text" [(ngModel)]="username" name="username" class="form-control" 
       [placeholder]="'Nom d\'utilisateur' | translate" required /> 
      </div> 
      <div class="form-group"> 
       <input type="password" [(ngModel)]="password" name="password" class="form-control" 
       [placeholder]="'Mot de passe' | translate" required> 
      </div> 
      <button type="submit" data-spinner-color="white" data-style="zoom-in" 
      [ladda]="isLoading" translate class="btn btn-primary block full-width m-b"> 
       <span translate >Login</span> 
      </button> 

      <a [routerLink]="['/reset' , '1']"><small translate>Mot de passe oublié ?</small></a> 
      <br><br> 
      <p class="text-muted text-center"> 
       <small translate>vous n'êtes pas encore enregistré ?</small> 
      </p> 
      <a translate id="register" class="btn btn-sm btn-white btn-block" [routerLink]="['/register']"> 
       Créer un compte 
      </a> 
     </form>

來源

2017-04-26 Sofia Namoun

嘗試重大更改列表中列出'NG-required' – Rhea

@Rhea不起作用，同樣的問題 –

'ng-required'只在Angularjs中（不在Angular2 +中） –

我也被這個變化咬了。這不是在對角4

您需要添加ngNativeValidate

<form ngNativeValidate #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#">

按本comment

來源

2017-05-18 09:56:53 cortopy

我認爲你需要在你的<form>標籤中指定novalidate。 Angular已經將驗證程序附加到任何包含required屬性的ngModel指令的元素。它可能是驗證，你只是沒有注意到？使用chrome devtools來查看輸入是否具有ng-invalid類別？

來源

2017-04-26 09:31:42 Amit

是的，我已經檢查過它有ng無效的類，我需要的是內置瀏覽器驗證消息，像這樣https：//www.html5rocks .com/static/images/tutorials/constraintvalidation/ChromeForAndroid.png，你覺得novalidate會怎麼樣幫幫我？ –

哦，你希望兩個瀏覽器消息都出現並且角度維持驗證狀態嗎？刪除'novalidate'然後 – Amit

有或沒有novalidare，我不能得到想要的行爲，（運行內置瀏覽器驗證通常然後執行提交功能） –

HTML需要驗證被Angular忽略嗎？

回答

相關問題