Question

我有一个表格，其中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)
}

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>

请参阅代码段，当您在scope.userlist中推送对象时，可能会收到错误“无法设置未定义的属性”。

使用AngularJS，ng-submit在我的表单中无法正常工作

1 个答案: