Konkretes Material-Design-Formular kann nicht vom Controller zurückgesetzt werden

Question

Ich habe ein Angular Material Design-Formular mit 3 Eingabefeldern, die die Option required haben. Ich kann das Formular nicht auf den Standardzustand zurücksetzen, nachdem ich auf die Senden-Schaltfläche geklickt habe. Ich verwende $setPristine, um das Formular in den ursprünglichen Zustand zu ändern, aber die roten Fehlerzeilen erscheinen nach dem Senden. Gibt es eine Möglichkeit, diese Fehler nach dem Senden des Formulars loszuwerden.

Vielen Dank.

Codepen-Link: http://codepen.io/sateesh2499/pen/pbkjVV

Ausblick:

<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> 

Controller:

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

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

Answer 1

Sie können es lösen Zugabe $scope.careersForm.$setUntouched(); nach dem Anruf $setPristine.

Ich habe Ihren Plünderer gegabelt, wo Sie es arbeiten sehen können. Plunker here

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

Wie dem auch sei, ich denke, der Code funktionieren sollte ... so wahrscheinlich ein Fehler es ist.

Hoffe es hilft