REST API呼び出しが失敗したときに、角型JSでユーザーが入力したフォーム値を再入力する方法

Question

フォームを送信するときに、ドロップダウンとテキストボックスを含む角度jsフォームを使用しています。 。私は、インサートが失敗した場合に、フロントエンドに入力したフォームの値にエラーメッセージを入力する方法を知りたい場合は、

Answer 1

ここでは、コピーを作成してユーザーを再設定する方法の1つですに。それが役に立てば幸い。以下のコードにはCodepenがあります。

function exampleFactory($http) { 
    //placeholder exampleFactory 
    console.log('exampleFactory'); 

    function login() { 
    return { 
     data: console.log('data saved') 
    }; 
    } 
    return { 
    login: login 
    }; 
} 

function exampleController($scope, exampleFactory, $timeout) { 
    var copyOfUserDeets; 
    $scope.userForm = {}; 
    $scope.submit = function(userDeets) { 
    copyOfUserDeets = angular.copy(userDeets); 
    $scope.userForm = {}; 
    // exampleFactory 
    //  .login(userDeets) 
    //  .then(function(resp) { 
    //   $scope.userForm = {}; 
    //  }) 
    //  .catch(function(error) { 
    //   $scope.userForm = copyOfUserDeets; 
    //  }); 
    $timeout(function() { 
     $scope.userForm = copyOfUserDeets; 
    }, 10000); 
    }; 
} 

angular 
    .module('app', []) 
    .controller('exampleController', exampleController) 
    .factory('exampleFactory', exampleFactory); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 

<div class="container-fluid text-center" ng-app="app"> 
    <div class="container text-center" ng-controller="exampleController"> 
    <form name="userLoginForm" ng-submit="submit(userForm)" ng-model="userForm" novalidate> 
     <input type="email" name="email" ng-model="userForm.email" required=""> 
     <input type="text" name="password" ng-model="userForm.text" required=""> 
     <input type="submit" value="Submit" ng-disabled="userLoginForm.$invalid"> 
    </form> 
    <pre>{{userForm}}</pre> 
    </div> 
</div>