Оказание всех значений формы после вызова службы с помощью AngularJS

Question

У меня есть форму Угловой формы, которую я заполняю, используя служебный вызов. Проблема в том, что для того, чтобы получить валидацию и привязку данных к работе, я должен использовать $setViewValue и $render для каждого ввода формы. То, что я хотел бы сделать, это просто установить модель данных для формы и затем каким-то образом отобразить всю форму.

Вот пример того, что у меня есть, что работает:

var _promise = articleService.getArticle($scope.params.articleId); 
_promise.then(
    function(data) { 
     $scope.articleForm.title.$setViewValue(data.item.title); 
     $scope.articleForm.title.$render(); 
     $scope.articleForm.bodytext.$setViewValue(data.item.body); 
     $scope.articleForm.bodytext.$render(); 
     $scope.articleForm.keywords.$setViewValue(data.item.keywords); 
     $scope.articleForm.keywords.$render(); 
    }, 
    function() { 
     $scope.setMessage('There was a network error. Try again later.', 'error'); 
    } 
); 

ниже код выполняет один и тот же результат визуально (только не оказывает привязок, как обновление полей пачкать в проверке):

var _promise = articleService.getArticle($scope.params.articleId); 
_promise.then(
    function(data) { 
     // $scope.article breakdown: article.title, article.body, article.keywords 
     $scope.article = angular.copy(data.item); 
     // some sort of complete form render??? 
    }, 
    function() { 
     $scope.setMessage('There was a network error. Try again later.', 'error'); 
    } 
); 

HTML:

<form name="articleForm" novalidate role="form"> 
    <!-- TITLE --> 
    <div class="form-group" ng-class="{ 'has-error' : (articleForm.title.$invalid && !articleForm.title.$pristine) || (submitted && articleForm.title.$pristine) }"> 
     <label>Title</label> 
     <input type="text" name="title" ng-model="article.title" ng-minlength="3" required> 
     <p ng-show="(articleForm.title.$error.required && !articleForm.title.$pristine) || (submitted && articleForm.title.$pristine)" class="help-block">A title is required.</p> 
     <p ng-show="articleForm.title.$error.minlength" class="help-block">Title is too short.</p> 
    </div> 
    <!-- BODY --> 
    <div class="form-group" ng-class="{ 'has-error' : articleForm.bodytext.$invalid && !articleForm.bodytext.$pristine }"> 
     <label>Article Body</label> 
     <div text-angular ng-model="article.body" ng-change="updateBody()" id="bodytext" name="bodytext"></div> 
    </div> 
    <!-- KEYWORDS --> 
    <div class="form-group" ng-class="{ 'has-error' : (articleForm.keywords.$invalid && !articleForm.keywords.$pristine) || (submitted && articleForm.keywords.$pristine) }"> 
     <label>Keywords</label> 
     <input type="text" name="keywords" ng-model="article.keywords" ng-minlength="3" ng-maxlength="150" required> 
     <p ng-show="(articleForm.keywords.$error.required && !articleForm.keywords.$pristine) || (submitted && articleForm.keywords.$pristine)" class="help-block">At least one keyword is required.</p> 
     <p ng-show="articleForm.keywords.$error.minlength" class="help-block">Keywords is too short.</p> 
     <p ng-show="articleForm.keywords.$error.maxlength" class="help-block">Keywords is too long.</p> 
    </div> 
</form> 

Я чувствую, что должен простое решение для этого, с потому что это общий сценарий, но я искал высоко и низко, не имея ясного ответа. Может быть, я просто подхожу к этому неправильно?

Answer 1

Ну, я нашел решение, которое работает, но я не думаю, что это лучшее решение, чем просто установка всех полей формы отдельно. Я отправлю его здесь, хотя, если это кому-то поможет.

// set all the values via the angular model 
$scope.article = angular.copy(data.item); 

// without a timeout all the fields will still be unset (being asynchronous) 
$timeout(function() { 
    // loop through all the form values 
    angular.forEach($scope.articleForm, function(value, key){ 
     if(typeof value === 'object' && key !== '$error'){ 
      // reset the view value and render, to process the updates on the form 
      $scope.articleForm[key].$setViewValue($scope.articleForm[key].$viewValue); 
      $scope.articleForm[key].$render(); 
     } 
    }); 
});