2016-07-29 98 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(); 
    } 

无论如何,我认为你的代码应该工作...所以也许这是一个错误。

希望它有帮助