AngularJS ngDisabled isn't activated as it should be

Question

I have a code that should disable a button when : registerForm.$invalid || form.password != form.passwordBis, which should mean : "Disable the button if the form isn't valid OR if the '$scope.form.password' variable isn't equal to '$scope.form.passwordBis'.", isn't it?

So here I have a code that activate the button if the two passwords matches. Which shouldn't happen, because the first condition is still wrong !

HTML :

<div ng-app="app" ng-controller="formCtrl">
    <form name="registerForm">
        <div class="header">
            <h2>Create your account</h2>
        </div>
        <div class="form-group">
            <div class="title">First Name</div>
            <input type="text" name="firstName" ng-required class="form-control" ng-class="{empty:form.firstName.length==0}" ng-model="form.firstName" required></input>
        </div>
        <div class="form-group">
            <div class="title">Last Name</div>
            <input type="text" name="lastName" ng-required class="form-control" ng-class="{empty:form.lastName.length==0}" ng-model="form.lastName" required></input>
        </div>
        <div class="form-group">
            <div class="title">Email</div>
            <input type="email" name="email" ng-required class="form-control" ng-class="{empty:form.email.length==0}" ng-model="form.email" required></input>
        </div>
        <div class="form-group">
            <div class="title">Password</div>
            <input type="password" name="password" class="form-control" ng-class="{empty:form.password.length==0}" ng-model="form.password" required></input>
            <input type="password" name="passwordBis" class="form-control" ng-class="{empty:form.passwordBis.length==0}" ng-model="form.passwordBis" minlength="6" required></input>
        </div>
        <div ng-if="form.password != form.passwordBis" class="error">Passwords doesn't match.</div>
        <div class="form-group">
            <button class="btn btn-success" ng-click="register()" ng-disabled="registerForm.$invalid || form.password != form.passwordBis">Register</button><br/>
        </div>
    </form>
</div>

JS :

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

app.controller("formCtrl", function($scope) {
    $scope.form = {
            firstName: "",
            lastName: "",
            email: "",
            password: "",
            passwordBis: ""
    };
});

And you can test it : JSFiddle

What am I missing ?

Answer 1

Remove ng-required attributes from your form elements.

For form elements you should use either ng-required or required, but not both at the same time. ng-required expects an expression that needs to evaluate to true in order to mark a form element as required, whereas required doesn't need any value. See https://stackoverflow.com/a/16648851/1237995 for more detailed explanation.