javascript - cloak - ngclass

angularjs forma error de reinicio

Question

Estoy intentando hacer un formulario con validaciones usando angularjs y hasta ahora hice un buen trabajo. Pero cuando confirmo mi botón de reinicio todos los campos se restablecen, excepto los mensajes de error que recibo de mi parte de validación. ¿Cómo puedo deshacerme de todos los campos y mensajes de error cuando reinicio mi formulario?

Así es como es cuando presiono mi botón de reinicio

este es mi código

<div class="page-header"><center><h2>Give us your Feedback</h2></center></div>

    <!-- 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>
            </font>
        </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>
</div>

Mi controlador

.controller(''ContactCtrl'', function($scope,$state,$ionicPopup, $timeout) {
    $scope.showfeedback = function() {
        $state.go(''app.sfeedback'');
    };

    $scope.submitForm = function(isValid) {
        $scope.submitted = true;

        // check to make sure the form is completely valid
        if (!isValid) {
            var alertPopup = $ionicPopup.alert({
                title: ''Invalid data entered!'',
            });
        } else {
            var alertPopup = $ionicPopup.alert({
                title: ''Feedback submitted'',
            });
        }
    };

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

Answer 1

Danos tu opinion

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

Answer 2

En caso de que no tenga un maestro (modelos dinámicos del servidor), y quiera restablecer el formulario, pero solo la parte vinculada del modelo, puede usar este fragmento:

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

Y luego puede usarlo con un reset button estándar como ese:

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

Answer 3

En mi forma

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

solo necesita llamar a $scope.formReview.reset() donde formReview es mi nombre de formulario.

Answer 4

Hay documentación de API en el Documentation .

Esto me permitió encontrar que hay otros métodos para llamar tales como:

$setUntouched() - que es una función que estaba usando si el usuario se ha enfocado en el campo, y luego dejó el campo, esto borra esta característica cuando lo ejecuta.

Creé una función de restablecimiento de formulario simple que puedes usar también.

// 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''s 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();
}

En su forma, esta configuración simple le permitirá restablecer el formulario

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

Answer 5

Mantuve el type="reset" en mi botón. Lo que hice fue ng-click="resetForm(userForm)" (usando userFrom para que coincida con su ejemplo) y el controlador define resetForm() como

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

Esto es lo que sucede:

1. Cuando se hace clic en el botón de reinicio, devolverá los valores originales según lo especificado por el atributo de value en la entrada
2. $commitViewValue() forzará la escritura de lo que se encuentre actualmente en la vista al $modelValue de cada campo (no es necesario iterar manualmente), sin esto, el último $modelValue aún se almacenará en lugar de restablecerse.
3. $setPristine() restablecerá cualquier otro campo validado y enviado.

En mi angular-bootstrap-validator ya tenía el FormController como tal, no necesitaba pasar el formulario en sí mismo.

Answer 6

Para mí, usar $setPristine para restablecer el formulario es un truco. La verdadera solución es mantenerlo como debería ser:

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

luego en angular:

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

y eso es.

Answer 7

Para restablecer las validaciones, debemos hacer dos cosas:

1. limpiar los campos

2. Agregue lo siguiente:

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

programCreateFrm es el nombre del formulario. Por ejemplo:

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

Este código me funciona.

Answer 8

Tuve el mismo problema y usé el siguiente código para restablecer completamente el formulario:

$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''s state
    $scope.userForm.$setPristine(true);
};

Answer 9

Use lo siguiente para restablecer el estado sucio

$scope.form.$setPristine();

Use lo siguiente para reiniciar y borrar la validación

$scope.form.$setValidity();

Answer 10

Utilizar esta

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

En el controlador

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

Funciona para mí

Answer 11

Yo fui con...

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

Se siente hacky ... pero mucho sobre angular.

Además ... esto fue lo único que funcionó.

Answer 12

var original = $scope.user;

al reiniciar:

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

retirar

type=''reset'' in  <button>

aquí está la Documentation angular para controladores de formularios.