ng-submit 在我的 AngularJS 表单中无法正常工作答案

【问题标题】：ng-submit doesnt work correct in my form with AngularJSng-submit 在我的 AngularJS 表单中无法正常工作
【发布时间】：2017-08-24 18:03:31
【问题描述】：

我有一个带有 ng-submit 注册新用户的表单，它应该在按下提交按钮时更新注册窗口。但它不正确:( 你能看看我的代码并说出什么问题吗？我是 AngularJs 的新手

这是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>

这是角度函数：

   $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)
}

【问题讨论】：

控制台显示什么错误？没关系。
没有错误显示，它只保留输入中的所有数据
我认为你应该声明 $scope.userlist= []; 如果没有声明，并且在推送用户信息集 $scope.newUser= {} 以清除输入条目之后。
感谢您的清算建议

标签： javascript angularjs forms

【解决方案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>

查看 sn-p，当您将对象推送到 scope.userlist 中时，您可能会收到错误“无法设置未定义的属性”。

【讨论】：