Form Validation in 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

Do you have any fiddle/plunker for this? – Vinay K Feb 27 '15 at 08:17 — Vinay K, Feb 27 '15 at 08:17

score 0 · Answer 1 · answered Feb 27 '15 at 08:36

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>

Thanks dude, appreciate that, but I want to try using directive — user2361494, Feb 27 '15 at 08:49

Form Validation in Angularjs

1 Answers1