AngularJS устанавливает форму в начальное состояние

0

У меня есть форма, которая когда-то была представлена, я хочу очистить все поля и установить для нее начальное состояние.

Я использую $scope.form.setPristine(); но метки полей сохраняют красный цвет.

Изображение 174551

Как я могу избежать этого?

EDIT:

Здесь я отправляю код. Все работает отлично, за исключением такой проблемы.

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
    Что вы пробовали?
  • 0
    «Введите ваш текущий пароль» читается как лучший английский для меня. Можем ли мы посмотреть код?
Показать ещё 5 комментариев
Теги:
forms

2 ответа

0
Лучший ответ

Сброс с помощью $ setPristine и $ setUntouched (для вашей скрипки):

    $scope.user_form.$setPristine();
    $scope.user_form.$setUntouched();
  • 0
    Спасибо! $ SetUntouched (); было решение избежать красных меток.
1

Ты не понимаешь

setPristine();

Он только очищает классы от вашей формы, ничего больше. Переменные все еще установлены. Вам нужно сделать это, как показано ниже:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню