簡體   English   中英

ng-submit在我的AngularJS中無法正常工作

[英]ng-submit doesnt work correct in my form with AngularJS

我有一個帶有ng-submit注冊新用戶的表單,當按下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)
}

 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中時,可能會收到錯誤“無法設置未定義的屬性”。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM