Подтверждение формы в Angularjs

Question

Справочная информация: Я следил за this и довольно долго проработал для создания пользовательского тега для выполнения проверки (совпадение 2 паролей), но очередь проверки формы ($ error) не содержит моих пользовательских ошибка (isMatch), и, таким образом, не работает, как ожидалось :(

контроллер

insiderApp.directive('isMatch',function(){ 
    return{ 
     require: "ngModel", 
     link: function(scope,elt,attr,ngModel){ 
      var firstPwd = attr.isMatch; 

      //format text from the user (view to model) 
      ngModel.$parsers.unshift(function(value){ 
       var valid = firstPwd === value; 
       ngModel.$setValidity('isMatch',valid); 
       return valid; 
      }); 

      //format text going to user (model to view) 
      ngModel.$formatters.unshift(function(value){ 
       ngModel.$setValidity('isMatch',firstPwd === value); 
       return value; 
      }); 
     } 
    }; 
}); 

HTML (вид)

<form role="form" name="wifiForm" novalidate> 
      </br> 
      <div class="form-group"> 
      <label for="ssid">SSID:</label> 
      <input name="ssid" type="text" class="form-control" id="ssid" placeholder="Enter the SSID" ng-model="wifiConf.ssid" required> 

      </div> 

      <div class="form-group" ng-class="{'has-error':wifiConf.key.length<8 || wifiConf.key.length>64 && wifiForm.$dirty}"> 
      <label for="secret">WPA2 Pre-Shared Key:</label> 
      <input name="secret" type="password" class="form-control" id="secret" ng-model="wifiConf.key" placeholder="Enter the WPA2 Pre-Shared Key" required> 
       <span class="text-danger" ng-show="wifiConf.key.length<8 || wifiConf.key.length>64 && wifiForm.$dirty"><b>Secret length should be within 8 to 64 characters.</b></span> 
      </div> 

      <div class="form-group" ng-class="{'has-error': wifiConf.key != wifiConf.keyRepeat && wifiForm.$dirty}"> 
      <label for="secretRepeat">WPA2 Pre-Shared Key (Repeat):</label> 
      <input name="secretRepeat" type="password" class="form-control" id="secretRepeat" ng-model="wifiConf.keyRepeat" isMatch="wifiConf.key" required placeholder="Confirm WPA2 Pre-Shared Key"> 
      <span class="text-danger" ng-show="wifiForm.secretRepeat.$error"><b>Two secrets are not match to each other.</b></span> 
      </div> 

      <button type="submit" class="btn btn-default wifiSubmit" ng-disabled="wifiForm.$invalid" ng-click="wifiProceed(wifiConf,'/configure/done')">Next</button> 
</form> 

проблема даже в том случае, если 2 пароля неверны, пользователи все еще могут нажать «Далее».

Любая помощь будет оценена

Answer 1

Может быть, вы можете попробовать другой более простой способ:

<form role="form" name="wifiForm" novalidate> 
      </br> 
      <div class="form-group"> 
      <label for="ssid">SSID:</label> 
      <input name="ssid" type="text" class="form-control" id="ssid" placeholder="Enter the SSID" ng-model="wifiConf.ssid" required> 

      </div> 

      <div class="form-group" ng-class="{'has-error':wifiConf.key.length<8 || wifiConf.key.length>64 && wifiForm.$dirty}"> 
      <label for="secret">WPA2 Pre-Shared Key:</label> 
      <input name="secret" type="password" class="form-control" id="secret" ng-model="wifiConf.key" placeholder="Enter the WPA2 Pre-Shared Key" required> 
       <span class="text-danger" ng-show="wifiConf.key.length<8 || wifiConf.key.length>64 && wifiForm.$dirty"><b>Secret length should be within 8 to 64 characters.</b></span> 
      </div> 

      <div class="form-group" ng-class="{'has-error': wifiConf.key != wifiConf.keyRepeat && wifiForm.$dirty}"> 
      <label for="secretRepeat">WPA2 Pre-Shared Key (Repeat):</label> 
      <input name="secretRepeat" type="password" class="form-control" id="secretRepeat" ng-model="wifiConf.keyRepeat" isMatch="wifiConf.key" required placeholder="Confirm WPA2 Pre-Shared Key"> 
      <span class="text-danger" ng-show="wifiForm.secretRepeat.$dirty && (wifiConf.keyRepeat != wifiConf.key)"><b>Two secrets are not match to each other.</b></span> 
      </div> 

      <button type="submit" class="btn btn-default wifiSubmit" ng-disabled="wifiForm.$invalid || (wifiConf.keyRepeat != wifiConf.key)" ng-click="wifiProceed(wifiConf,'/configure/done')">Next</button> 
</form>