角度表單驗證通過確認

我正在嘗試使用ngMessage和min/maxlength進行角度驗證，所以場景是如果min！= min，那麼應該禁用提交按鈕。如果不匹配按鈕也應該禁用;如果全部匹配並且相等，則只允許提交表格。角度表單驗證通過確認

此外，由於min/maxlenght，ng-show無法正常工作，即使密碼匹配也不會消失。

<input required 
          data-ng-model-options="{debounce: 1000}" 
          data-ng-model="vm.registerForm.Password" 
          class="form-control search-input inverted text-box single-line text-box single-line" 
          data-val="true" data-val-required="The password field is required." 
          id="register-password" 
          name="password" 
          placeholder="Password" 
          type="password" 
          value="" 
          data-ng-minlength="6" 
          data-ng-maxlength="12"/> 
          <span data-ng-show="vm.registerForm.Password !== vm.registerForm.ConfirmPassword" style="color: red;">Password is not matched</span> 
         <div class="mt-10" data-ng-messages="registerForm.password.$error"> 
          <!--<p data-ng-message="vm.registerForm.Password !== vm.registerForm.ConfirmPassword">Password is not matched</p>--> 
          <p data-ng-message="minlength">Password is too short (min of 6 characters)</p> 
          <p data-ng-message="maxlength">Password is too long (max of 12 characters)</p> 
         </div> 
        </div> 
        <div class="col-sm-6 "> 
         <label for="register-confirm-password" class="hidden">Confirm Password </label> 
         <input 
          required 
          data-ng-model="vm.registerForm.ConfirmPassword" 
          class="form-control search-input inverted text-box single-line text-box single-line" 
          data-val="true" 
          data-val-required="The password field is required." 
          id="register-confirm-password" 
          name="ConfirmPassword" 
          placeholder="Confirm Password" 
          type="password" 
          value=""/> 
        </div> 
       </div> 

       <div class="form-group clearfix"> 
        <div class="col-sm-12"> 
         <label for="submitForm" class="hidden">Submit</label> 
         <input 
          data-ng-disabled="vm.registerForm.Password !== vm.registerForm.ConfirmPassword ? vm.registerForm.Password : disabled || registerForm.$invalid 
          || registerForm.Password.$error.minlength < registerForm.Password.$error.minlength" 
          type="button" 
          id="submitForm" 
          data-ng-click="vm.postRegisterForm()" 
          value="Register" 
          class="btn-main maxw-200" 
          data-ng-class="{'orange': registerForm.$valid}"> 
        </div> 
       </div>

來源

2015-12-07 MrNew

你在哪裏申報'NG-app'？ – Arg0n

在html標記中抱歉忘了將它包含在小提琴中 – MrNew

見this更新的jsfiddle在那裏我加入ng-app。幷包括ngMessages。

的JavaScript

var app = angular.module("MyApp", ["ngMessages"]);

HTML

<form ng-app="MyApp" action="" name="registerForm">

來源

2015-12-07 09:53:39 Arg0n

表單正在工作，只是條件不正常。不能讓我的頭靠近它。 – MrNew

它在Chrome中正常工作。 – Arg0n

是的，我知道它的工作，我沒有說表格不工作。我的問題是如何正確驗證提交按鈕中的最小/最大長度，並且ng-show無法正常工作。因爲你的jsfiddle與我的應用程序中的實際代碼完全相同。「ng-app」不是問題！ – MrNew

角度表單驗證通過確認

回答

相關問題