角形式驗證$原始不能正常工作

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

實際上驗證也是不可忽視的。在您的codepen代碼中，輸入任何文本並將其移除爲空。然後切換到另一個輸入元素。 has-error類已添加。

因爲您是通過$dirty，默認情況下爲false檢查，如果你不改變任何輸入文本（https://docs.angularjs.org/api/ng/type/form.FormController）：

$髒，如果用戶已經與形式交互布爾
真。

我添加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規則工作。

Answer 2

你應該檢查表格是否提交使用contactForm。$ submitted。

表單提交後formController對象被更新並且每個controll模型的各種參數被更新，然後您可以驗證您的數據。

你還沒有在你的表單驗證中檢查過。 更新的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

而且不是$無效可以使用需要驗證fields.Also你可以使用正則表達式來把你的自定義驗證規則。

例如

<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>