2016-08-04 8 views
0

Ich habe ein Formular, das einmal eingereicht, möchte ich alle Felder löschen und setzen Sie es auf den Ausgangszustand.AngularJS Formular auf den Ausgangszustand

Ich verwende $scope.form.setPristine();, aber Feldbeschriftungen behalten rote Farbe.

enter image description here

Wie kann ich das vermeiden?

EDIT:

Hier schreibe ich den Code. Alles funktioniert gut, außer durch solche Probleme.

Html:

<form name="change_password" novalidate> 
    <md-input-container style="margin:0;width:200px" flex> 
    <label>Enter your current password</label> 
    <input name="password" type="password" ng-model="password" ng-minlength="7" required> 

    <div ng-messages="change_password.password.$error" ng-if="change_password.password.$dirty" role="alert"> 
     <div class="error_form" ng-message="required">Enter your current password.</div> 
     <div class="error_form" ng-message="minlength">Password must be at least 7 characters long.</div> 
    </div> 
    </md-input-container> 

    <md-input-container style="margin:0;width:200px" flex> 
    <label>New Password</label> 
    <input name="new_password" type="password" ng-model="new_password" ng-minlength="7" required> 

    <div ng-messages="change_password.new_password.$error" ng-if="change_password.new_password.$dirty" role="alert"> 
     <div class="error_form" ng-message="required">Enter your new password.</div> 
     <div class="error_form" ng-message="minlength">New password must be at least 7 characters long.</div> 
    </div> 
    </md-input-container> 

    <md-input-container style="margin:0;width:200px" flex> 
    <label>Confirm new password</label> 
    <input name="re_new_password" type="password" ng-model="re_new_password" ng-minlength="7" required> 

    <div ng-messages="change_password.re_new_password.$error" ng-if="change_password.re_new_password.$dirty" role="alert"> 
     <div class="error_form" ng-message="required">Confirm your new password.</div> 
     <div class="error_form" ng-message="minlength">New password must be at least 7 characters long.</div> 
    </div> 
    </md-input-container> 

    <button class="button" style="width:200px" ng-if="!saving" ng-click="save_password()" ng-disabled="is_uploading || change_password.$invalid || new_password!=re_new_password">Save new password</button> 
    <div ng-if="saving" layout="row" layout-align="center center"> 
    <md-progress-circular md-mode="indeterminate" size="22"></md-progress-circular> 
    </div> 
</form> 

Ctrl:

userService.save_password($scope.password, $scope.new_password).then(function(response) { 
    $scope.$apply(function() { 
    if (response.result) { 
     $scope.password = ''; 
     $scope.new_password = ''; 
     $scope.re_new_password = ''; 
     console.info($scope.change_password); 
     $scope.change_password.$setPristine(); 
    } 
    showMessage(response); 
    $scope.saving = false; 
    }) 
}) 
+0

Was haben Sie versucht? –

+0

"Geben Sie Ihr aktuelles Passwort ein" lautet für mich besser Englisch. Dürfen wir etwas Code sehen? –

+0

@DanielShillcock Danke! geändert. – domoindal

Antwort

0

Zurücksetzen mit $ setPristine und $ setUntouched (für Ihre Geige):

$scope.user_form.$setPristine(); 
    $scope.user_form.$setUntouched(); 
+0

Danke! $ setUntouched(); war die Lösung, rote Etiketten zu vermeiden. – domoindal

1

Sie mißverstehen

setPristine(); 

Es löscht nur Klassen auf Ihrem Formular, sonst nichts. Variablen sind noch festgelegt. Sie müssen es wie folgt tun:

$scope.emptyModel = {}; 
$scope.reset = function() { 
    $scope.yourFormModel = angular.copy($scope.emptyModel); 
    $scope.user_form.$setPristine(); 
    $scope.user_form.$setUntouched(); 
} 
Verwandte Themen