Form Validation in Angularjs - angularjs

Question

Background:
I have followed this guide and struggle quite a long time to make a custom tag to perform validation (matching of 2 passwords), but the form validation ($error) queue does not contains my custom error (isMatch), and thus does not work as expected :(
Controller
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 (view)
<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>
The problem is even when 2 passwords are incorrect, users still able to press Next.
Any help will be appreciated

Answer 1

Maybe you can try another simpler way :
<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>