2016-07-29 115 views
3

我有一個角度材料設計表單,其中有3個輸入字段,其中有required選項。點擊提交按鈕後,我無法將表單重置爲默認狀態。我正在使用$setPristine將表單更改爲原始狀態,但提交後出現紅色錯誤行。提交表單後,有沒有辦法擺脫這些錯誤?無法從控制器重置角度材料設計表格

謝謝。

Codepen鏈接:http://codepen.io/sateesh2499/pen/pbkjVV

查看:

<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp"> 

    <form name="careersForm"> 
     <div class="careersContainer"> 
      <md-content> 
       <div layout-gt-sm="row"> 
        <md-input-container class="md-block" flex-gt-sm> 
         <label>Job Title</label> 
         <input type="text" name="jobTitle" ng-model="careers.jobTitle" required> 
        </md-input-container> 
        <md-input-container class="md-block" flex-gt-sm> 
         <label>Job Location</label> 
         <input type="text" name="jobLocation" ng-model="careers.jobLocation" required> 
        </md-input-container> 
        <md-input-container class="md-block" flex-gt-sm> 
         <label>Job Category</label> 
         <input type="text" name="jobCategory" ng-model="careers.jobCategory" required> 
        </md-input-container> 
       </div> 

      </md-content> 
     </div> 
     <div class="row text-center"> 
      <div class="col-sm-12"> 
       <md-button class="md-raised" style="width: 200px" 
          ng-click="postJob()">Submit</md-button> 

      </div> 
     </div> 
    </form> 
Pristine: {{careersForm.$pristine}} 
</div> 

控制器:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

.controller('AppCtrl', function($scope) { 
    $scope.careers = {}; 
    $scope.postJob = function(){ 
    // after successful posting 
    $scope.careers = {}; 
    $scope.careersForm.$setPristine(); 
    } 
}); 

回答

5

你可以解決它添加$scope.careersForm.$setUntouched();致電$setPristine後。

我已經分叉你的活塞,在那裏你可以看到它的工作。 Plunker here

$scope.postJob = function(){ 
    // after successful posting 
    $scope.careers = {}; 
    $scope.careersForm.$setPristine(); 
    $scope.careersForm.$setUntouched(); 
    } 

無論如何,我認爲你的代碼應該工作...所以也許這是一個錯誤。

希望它有幫助