角度表單驗證無法按預期工作

我很難理解它是如何工作的......基本上，當我提交表單時，驗證時沒有檢查所需的輸入或其他任何內容。
我設置了'novalidate'屬性來禁用HTML5驗證，然後我將所有的字段設置爲'required'（對於我的郵件輸入和電子郵件驗證一樣），並且使用'ngMessages'角度來檢查輸入（甚至是必要的？）。但我仍然可以提交沒有填寫任何字段的表單...

我在做什麼錯了？難道它來自我使用ng-submit而不是ng-click的事實嗎？
任何幫助表示讚賞！

https://jsfiddle.net/WebMoutarde/n1mocvco/角度表單驗證無法按預期工作

<div ng-controller="MyCtrl"> 
    <form name="form" novalidate ng-submit="vm.signup()"> 

     <div class="list"> 
     <label class="item item-input item-stacked-label noborder"> 
      <span class="input-label">Nom</span> 
      <input type="text" name="nom" ng-model="vm.nom" required> 
     </label> 
      <hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/> 
     <label class="item item-input item-stacked-label noborder"> 
      <span class="input-label">Prénom</span> 
      <input type="text" name="prenom" ng-model="vm.prenom" required> 
     </label> 
     <hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/> 
     <label class="item item-input item-stacked-label noborder"> 
      <span class="input-label">Mail</span> 
      <input type="email" name="mail" ng-model="vm.mail" required> 
     </label> 
     <hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/> 
     <label class="item item-input item-stacked-label noborder"> 
      <span class="input-label">Mot de passe</span> 
      <input type="password" name="password" ng-model="vm.password" required> 
     </label> 
     <hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/> 
     <label class="item item-input item-stacked-label noborder"> 
      <span class="input-label">Confirmez votre mot de passe</span> 
      <input type="password" name="passwordCheck" ng-model="vm.passwordCheck" required> 
     </label> 
     <hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/> 

     </div> 
      <div ng-messages="form.$error" role="alert"> 
      <p style="text-align: center;" ng-message="required">You must fill in all fields</p> 
      <p style="text-align: center;" ng-message="email">Your email address is invalid</p> 
      </div> 
      <div class="item noborder"> 
      <button class="button button-block button-positive" type="submit" >Créer un compte</button> 
      </div> 
    </form> 
    </div>

我見過很多SO關於這個問題，但我還是失去了一些東西......

來源

2017-02-28 DevMoutarde

即使輸入字段無效，表單提交功能也會執行。你可以參考這個[答案]（http://stackoverflow.com/a/20103586/3764156）來防止不必要的表單提交。 –

好的，謝謝！我確實看到了這個問題，是的，我認爲最適合我的情況！ – DevMoutarde

直到形式進入有效狀態通過ng-disabled你可以禁用的表單提交按鈕指示表格button

<button class="button button-block button-positive" 
    type="submit" 
    ng-disabled="form.$invalid"> 
     Créer un compte 
</button>

或者甚至更好的驗證表單是有效的或ng提交方法，然後調用您的signup控制器的方法如下。

ng-submit="form.$valid && vm.signup()"

來源

2017-02-28 10:11:17

感謝你們兩個，我會使用它！（表格$有效） – DevMoutarde

角度表單驗證無法按預期工作

回答

相關問題