角度表单验证无法按预期工作

我很难理解它是如何工作的......基本上，当我提交表单时，验证时没有检查所需的输入或其他任何内容。
我设置了'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

角度表单验证无法按预期工作

回答

相关问题