AngularJSのフォームで正しく動作しません。

Question

IVEは新規ユーザー登録のフォームを持っていますので、送信ボタンが押されたときに登録ウィンドウを更新する必要があります。それは正しくありません:( 私のコードを見ていただきました間違ったと言う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にオブジェクトをプッシュしているときにエラーが「未定義のプロパティを設定することはできません」取得される可能性があります、スニペットを参照してください。