Question

有谁能告诉我为什么我的验证被忽略了？这是我的表格：

<form name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && !contactForm.fullName.$pristine }">
        <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
        <input class="form-control" type="text" name="email" placeholder="Email address" ng-model="controller.model.email" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && !contactForm.phoneNumber.$pristine }">
        <input class="form-control" type="text" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.orderQuantity.$invalid && !contactForm.orderQuantity.$pristine }">
        <select class="form-control" name="orderQuantity" ng-model="controller.model.orderQuantity">
            <option disabled selected>Order quantity</option>
            <option>10+</option>
            <option>20+</option>
            <option>30+</option>
            <option>40+</option>
        </select>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && !contactForm.country.$pristine }">
        <input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
    </div>
    <div class="form-group">
        <textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
    </div>
    <div class="form-group">
        <div class="recaptcha" theme="dark" vc-recaptcha key="'6Lcc0AgTAAAAAIpcEqqDI3Ko8dZ05H-GGgUnfOvA'"></div>
    </div>
    <div class="form-group">
        <button class="btn btn-primary">Send</button>
    </div>
</form>

我在这里设置了一个codepen： http://codepen.io/r3plica/pen/XbzyzQ?editors=101

Answer 1

您应该使用 contactForm。$ submitted 检查表单是否已提交。

表单提交后， formController对象会更新，每个控件模型的各个参数都会更新，然后您可以验证您的数据。

您尚未在表单验证中对此进行检查。更新的html是

<div class="container" ng-app="validationExample">
  <div class="row" ng-controller="ValidationController as controller">


    <form style="margin-top: 20px;" name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
      <div class="form-group" ng-class="{ 'has-error' :  contactForm.fullName.$invalid && contactForm.$submitted }">
        <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && contactForm.$submitted }">
        <input class="form-control" type="email" name="email" placeholder="Email address" ng-model="controller.model.email" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid   && contactForm.$submitted }">
        <input class="form-control" type="tel" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.$submitted && contactForm.orderQuantity.$invalid && contactForm.orderQuantity.$error.required }">
        <select class="form-control"  required name="orderQuantity" ng-model="controller.model.orderQuantity"> 
          <option disabled selected>Order quantity</option>
          <option>10+</option>
          <option>20+</option>
          <option>30+</option>
          <option>40+</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && contactForm.$submitted}">
        <input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
      </div>
      <div class="form-group">
        <textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">Send</button>
      </div>
    </form>
  </div>
</div>

以下是更新后的代码codepen

您也可以使用必需来验证字段，而不是 $ invalid 。您还可以使用正则表达式来放置自定义验证规则。

e.g。

   <input  name="first_name" class="form-control" required type="text" ng-model="NewUser.first_name"  ng-pattern="/^[A-Za-z]+[0-9]*$/" />
                    <span ng-show="newuser.first_name.$error.pattern">This is not valid <b>Last name</b></span>

Answer 2

实际上，验证不会被忽略。在codepen代码中，输入任何文本并删除为空。然后切换到另一个输入元素。添加了has-error类。

因为您正在检查$dirty，如果您不更改任何输入文本（https://docs.angularjs.org/api/ng/type/form.FormController），则默认为false：

$ dirty boolean
如果用户已与表单进行过互动，则为True。

我在您的代码中添加了ng-minlength=5：http://codepen.io/anon/pen/xGPmqR：

<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.fullName.$dirty }">
    <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required ng-minlength=5 />
</div>

当您输入任何文字时，ng-minlength规则正在运作。

角度表单验证$ pristine无法正常工作

2 个答案: