ng-submit doesnt work correct in my form with AngularJS

Question

Ive got a form with ng-submit registrating new user,it should update the registration window when the submit button is pressed.But it doesnt do it correct:( Can you watch my code and say whats wrong?I`m new with AngularJs

Here's the html:

    <div class="registration-box" ng-show="registrationShow">
        <form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
            <div class="input-registration-fields">
                <label>Enter login:</label>
                <input type="text" name="login" class="form-input" ng-model="newUser.login" ng-pattern="loginPattern" required>
                <div class="error" ng-if="registrationForm.login.$error.pattern">Enter correct login</div>
                <!--                    <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
                <br>
                <label>Enter email:</label>
                <input type="text" name="email" class="form-input" ng-model="newUser.email" ng-pattern="emailPattern" required>
                <!--                    <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
                <div class="error" ng-if="registrationForm.email.$error.pattern">Enter correct email</div>
                <br>
                <label>Enter password:</label>
                <input type="password" name="password" class="form-input" ng-model="newUser.password" ng-pattern="passwordPattern" required>
                <label>Confirm password:</label>
                <input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-pattern="passwordPattern" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
                <div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
                <br> </div>
            <div class="registration-checkbox">
                <input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> <a href="#"> I accept all terms and conditions</a> </div>
            <div class="registration-box__logic-buttons">
                <button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
                <button id="cancelRegistrationButton">Cancel</button>
            </div>
        </form>
    </div>

Here's angular function:

   $scope.addNewUser = function (userDetails, isvalid) {
    if (isvalid) {
        $scope.userlist.push({
                username: userDetails.login
                , password: userDetails.password
                , email: userDetails.email
            })
            //                $scope.resetRegistration();
    }

    console.log($scope.userlist)
}

Answer 1

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.addNewUser = function (userDetails, isvalid) { $scope.userlist= []; if (isvalid) { $scope.userlist.push({ username: userDetails.login, password: userDetails.password, email: userDetails.email }); // $scope.resetRegistration(); } console.log($scope.userlist); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <div class="registration-box"> <form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate> <div class="input-registration-fields"> <label>Enter login:</label> <input type="text" name="login" class="form-input" ng-model="newUser.login" required> <div class="error">Enter correct login</div> <!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>--> <br> <label>Enter email:</label> <input type="text" name="email" class="form-input" ng-model="newUser.email" required> <!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>--> <div class="error">Enter correct email</div> <br> <label>Enter password:</label> <input type="password" name="password" class="form-input" ng-model="newUser.password" required> <label>Confirm password:</label> <input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required> <div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div> <br> </div> <div class="registration-checkbox"> <input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> <a href="#"> I accept all terms and conditions</a> </div> <div class="registration-box__logic-buttons"> <button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button> <button id="cancelRegistrationButton">Cancel</button> </div> </form> </div> </div> </div> 

see the snippet, you might be getting error "cannot set property of undefined" while you push the object in your scope.userlist.