Question

我很难理解它是如何工作的...基本上当我提交表单时，它会在不检查所需输入或其他任何内容的情况下进行验证。
我设置'novalidate'属性来禁用HTML5验证，然后我将所有字段设置为'required'（我的邮件输入与电子邮件验证相同），我正在使用'ngMessages '从Angular检查输入（甚至是必要的??）。但是我仍然可以在没有填写任何字段的情况下提交表格。

我做错了什么？它可能来自我使用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问题，但我仍然遗漏了一些......

Answer 1

您可以使用表单ng-disabled上的button指令禁用表单提交按钮，直到表单进入有效状态

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

或者甚至更好的是验证表单已经有效或ng-submit方法，然后调用您的signup控制器方法，如下所示。

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

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

1 个答案: