Angularjs форма reset ошибка

Ответ 1

var original = $scope.user;

при сбросе:

$scope.user= angular.copy(original);
$scope.userForm.$setPristine();

удалить

type='reset' in  <button>

здесь Angular Документация для контроллеров форм.

Ответ 2

Используйте следующее для reset грязного состояния

$scope.form.$setPristine();

Для очистки проверки

$scope.form.$setValidity();

Ответ 3

Имеется документация API на FormController.

Это позволило мне обнаружить, что существуют другие методы, например:

$setUntouched() - это функция, которую я использовал, если пользователь сфокусировался на поле, а затем покинул поле, это очистит эту функцию при ее запуске.

Я создал простую форму reset функцию, которую вы также можете использовать.

// Set the following in your controller for the form/page.
// Allows you to set default form values on fields.
$scope.defaultFormData = { username : 'Bob'}
// Save a copy of the defaultFormData
$scope.resetCopy = angular.copy($scope.defaultFormData);
// Create a method to reset the form back to it original state.
$scope.resetForm =  function() {
    // Set the field values back to the original default values
    $scope.defaultFormData = angular.copy($scope.resetCopy);
    $scope.myForm.$setPristine();
    $scope.myForm.$setValidity();
    $scope.myForm.$setUntouched();
    // in my case I had to call $apply to refresh the page, you may also need this.
    $scope.$apply();
}

В вашей форме эта простая настройка позволит вам reset форму

<form ng-submit="doSomethingOnSubmit()" name="myForm">
    <input type="text" name="username" ng-model="username" ng-required />
    <input type="password" name="password" ng-model="password" ng-required />
    <button type="button" ng-click="resetForm()">Reset</button>
    <button type="submit">Log In</button>
</form>

Ответ 4

У меня была та же проблема, и я использовал полный код reset для следующего кода:

$scope.resetForm = function(){

    // reset your model data
    $scope.user = ...

    // reset all errors
    for (var att in  $scope.userForm.$error) {
        if ($scope.userForm.$error.hasOwnProperty(att)) {
            $scope.userForm.$setValidity(att, true);
        }
    }

    // reset validation state
    $scope.userForm.$setPristine(true);
};

Ответ 5

Используйте этот

<button type="button" ng-click='resetForm()'>Reset</button>

В контроллере

$scope.resetForm = function(){
   $scope.userForm.$dirty = false;
   $scope.userForm.$pristine = true;
   $scope.userForm.$submitted = false;
};

Его работа для меня

Ответ 6

Я пошел с...

$scope.form.$setPristine();
$scope.form.$error = {};

Чувствует себя взломанным... но многое о angular делает.

Кроме того... это было единственное, что сработало.

Ответ 7

Отправьте нам свою обратную связь

<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>


    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
        <label>Name*</label>
        <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"><font color="#009ACD">You name is required.</font></p>


    </div>

     <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
        <label>Email</label>
        <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"><font color="#009ACD">Enter a valid email.</font></p>
    </div>

    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
        <label>Description</label>
        <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
        <font color="white"><p ng-show="userForm.username.$error.minlength" class="help-block"><font color="#009ACD">Description is too short.</font></p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block"><font color="#009ACD">Description is too long.</font></p>
    </div>

    <div class="col"style="text-align: center">
        <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
        type="reset"
        ng-click="reset()"padding-top="true">Reset</button>


        <button class="button button-block button-positive"  style="display: inline-block; width:100px" ng-click="submit()"padding-top="true">Submit</button>
        </div>

</form>

Ответ 8

Для меня, используя $setPristine to reset, форма является взломом. Реальное решение состоит в том, чтобы сохранить его так, как должно быть:

<button type="reset" ng-click="reset()"></button>

затем в angular:

var original = angular.copy($scope.user);
$scope.reset = function() {
   $scope.user = angular.copy(original);
};

и что он.

Ответ 9

Если у вас нет мастера (динамические модели с сервера), и вы хотите reset форму, но только привязанная часть модели, вы можете использовать этот фрагмент:

  function resetForm(form){
    _.forEach(form, function(elem){
      if(elem !== undefined && elem.$modelValue !== undefined){
        elem.$viewValue = null;
        elem.$commitViewValue();
      }
    });
  }

И тогда вы можете использовать его со стандартным reset button следующим образом:

<button type="reset" ng-click="resetForm(MyForm);MyForm.$setValidity();">reset</button>

Ответ 10

В моей форме

<form angular-validator-submit="submitReview()" name="formReview"  novalidate angular-validator>

 <input type="text" name="Rating" validate-on="Rating" class="form-control"
   ng-model="Review.Rating" required-message="'Enter Rating'" required>
  <button type="button" ng-click="reset()">Cancel</button>
 </form>


app.controller('AddReview', function ($scope) {

    $scope.reset= function () {
        $scope.formReview.reset() 
    };
});

нужно только вызвать $scope.formReview.reset(), где formReview - это мое имя формы.

Ответ 11

Я сохранил type="reset" в моей кнопке. То, что я сделал, это ng-click="resetForm(userForm)" (используя userFrom для соответствия вашему примеру), и контроллер определяет resetForm() как

scope.resetForm = function(controller) {
  controller.$commitViewValue();
  controller.$setPristine();
};

Вот что происходит:

• Когда нажата кнопка reset, она вернет исходные значения, указанные атрибутом value на входе
• $commitViewValue() заставит записывать все, что сейчас находится в представлении $modelValue каждого поля (без необходимости итерации вручную), без этого последний $modelValue будет сохраняться, а не reset.
• $setPristine() будет reset любые другие поля проверки и отправки.

В моем angular-bootstrap-validator У меня уже был FormController, поэтому мне не нужно было проходить в самой форме.

Ответ 12

В reset валидации мы должны сделать две вещи:

• очистить поля

• Добавьте следующее:

  $scope.programCreateFrm.$dirty = false;
  $scope.programCreateFrm.$pristine = true;
  $scope.programCreateFrm.$submitted = false;
  

programCreateFrm - это имя формы. Например:

<form name="programCreateFrm" ng-submit="programCreateFrm.$valid && createProgram(programs)" novalidate>

Этот код работает для меня.