$ setPristine() nie działa.

Question

**** Uwaga Wyciąłem niektóre z moich innych funkcji, aby kod mógł zostać odczytany szybciej. Nie mogę wyczyścić formularza. po kliknięciu przycisku z funkcją anulowania. Myślałem, że mogę ustawić domyślny formularz, ale to nie ma znaczenia.

<form name="myForm" novalidate ng-submit="submit()"> 
    <table class="mealCost"> 

     <!-- descriptions --> 
     <tr> 
      <td> Base Meal Price: </td> 
      <td><input type="number" name="price" ng-model="mealPrice" required></td> 
     </tr> 
     <!-- waiter puts in the info --> 
     <tr> 
      <td> Tax Rate: % </td> 
      <td><input type="number" step="0.01" name="tax" ng-model="mealTax" required></td> 

     </tr> 

     <tr> 
      <td> Tip Percentage: % </td> 
      <td><input type="number" name="tip" step="0.01" ng-model="tipPercent" required></td> 

     </tr> 

    </table> 

    <p class="userResponse"> 
    <input type="submit" value="Submit"> 
    <!-- <input id="cancel" type="submit" value="Cancel" ng-submit="cancel(original)"> --> 
    <button ng-click="cancel()">Start Over</button> 
    </p> 

</form> 

Oto mój javascript Próbuję ustawić mój formularz na $ setPristine za pomocą polecenia przycisku z ng-click. I mimo, że ustawienie domyślne formularz pomoże, ale nic się nie dzieje na przedstawienia

var app = angular.module('myApp',[]). 
    controller('costController', function($scope) { 
     // $scope.ready= false; 
     $scope.mealPrice ="" ; 
     $scope.mealTax = 0.05; 
     $scope.tipPercent =0.05; 
     // possibly could do 

     var defaultForm={ 
      price: "", 
      tax: "", 
      tip:"" 
     } 

$scope.cancel = function() { 
      $scope.myForm.$setPristine(); 
      $scope.user = angular.copy(defaultForm); 
      console.log('empty'); 
     } 

Answer 1

myślę używasz to źle.

$ setPristine.

„Metoda ta może być wywołana w celu usunięcia klasy«NG-brudny»i ustawić formę do stanu dziewiczego (klasa ng-nietknięty) Metoda ta będzie także propagować do wszystkich kontroli zawarte w tym formularzu. "

W ten sposób kasowane są tylko klasy, ale nie zmienne $ scope. Zresetujesz zmienną $ scope.user, można powiedzieć:

Dodaj "użytkownika". przed każdym modelu w html

ng-model="user.tipPercent" 
ng-model="user.mealTax" 
ng-model="user.mealPrice" 

I zastąpić ten w swoim JS:

// $scope.ready= false; 
$scope.mealPrice ="" ; 
$scope.mealTax = 0.05; 
$scope.tipPercent =0.05; 
// possibly could do 

var defaultForm={ 
    price: "", 
    tax: "", 
    tip:"" 
} 

$scope.cancel = function() { 
    $scope.myForm.$setPristine(); 
    $scope.user = angular.copy(defaultForm); 
    console.log('empty'); 
} 

do tego:

var defaultForm = { 
    mealPrice : "", 
    mealTax : 0.05, 
    tipPercent : 0.05 
} 

$scope.user = angular.copy(defaultForm); 

$scope.cancel = function() { 
    $scope.myForm.$setPristine(); 
    $scope.user = angular.copy(defaultForm); 
    console.log('empty'); 
} 

Answer 2

to będzie działać, jeśli ng-model musiały $scope.user.price, $scope.user.tax i $scope.user.tip. Są one jednak powiązane z $scope.price, $scope.tax i $scope.tip.

Ustawienie formularza $pristine oznacza tylko wartości niezmodyfikowane przez użytkownika. To tak naprawdę nie zmienia wartości.

Roztwór A:

Bind modele do user.* i zastąpić

$scope.mealPrice = ''; 
$scope.mealTax = 0.05; 
$scope.tipPercent = 0.05; 

z

$scope.user = { 
    mealPrice: '', 
    mealTax: 0.05, 
    tipPercent: 0.05 
}; 

Roztwór B:

Repla CE:

$scope.user = angular.copy(defaultForm); 

z

$scope.mealPrice = defaultFrom.mealPrice; 
$scope.mealTax = defaultFrom.mealTax; 
$scope.tipPercent = defaultFrom.tipPercent; 

Answer 3

$scope.master = {}; 

$scope.reset = function(form) { 

     if (form) { 
      form.$setPristine(); 
      $scope.user = angular.copy($scope.master); 
     form.$setUntouched(); 
     }