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

Question

我已經使用ng-submit註冊新用戶的表單，它應該在按下提交按鈕時更新註冊窗口。但它不能正確顯示:( ？看我的代碼，說什麼是錯I`M新與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推對象。