$ setPristine() funktioniert nicht.

Question

**** Hinweis Ich habe einige meiner anderen Funktionen ausgeschnitten, damit der Code schneller gelesen werden kann. Ich kann das Formular nicht löschen. wenn ich auf die Schaltfläche mit der Abbrechen-Funktion klicke. Ich dachte, ich könnte ein Standardformular festlegen, aber das macht keinen Unterschied.

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

Hier ist mein Javascript Ich versuche, meine Form zu setPristine die Schaltfläche Befehl wiht ng Klick mit $ einzustellen. Ich aber, dass ein Standardformular Einstellung würde helfen, aber nichts passiert anschließend auf

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

Ich glaube, Sie es falsch verwenden.

$ setPristine.

„Diese Methode wird aufgerufen werden, kann die‚ng-dirty‘Klasse zu entfernen und das Formular zu seinem ursprünglichen Zustand (ng-pristine Klasse) eingestellt Diese Methode wird auch auf alle Steuerelemente propagieren in dieser Form enthalten. "

Dies löscht nur Klassen, aber nicht die $ Scope-Variablen. Sie setzen eine $ scope.user Variable zurück, könnte sagen:

Hinzufügen 'Benutzer.' vor jedem Modell in der Html

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

Und ersetzen Sie dies in Ihrem 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'); 
} 

dazu:

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

Diese funktionieren würde, wenn die ng-model-$scope.user.price gebunden waren, $scope.user.tax und $scope.user.tip. Sie sind jedoch an $scope.price, $scope.tax und $scope.tip gebunden.

Die Einstellung $pristine markiert nur die Werte, die vom Benutzer nicht geändert wurden. Es ändert die Werte nicht wirklich.

Lösung A:

Bind die Modelle zu user.* und

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

mit

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

Lösung B ersetzt werden:

Repla ce:

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

mit

$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(); 
     }