angularjs表单重置错误答案

【问题标题】：angularjs form reset errorangularjs表单重置错误
【发布时间】：2014-11-18 20:02:39
【问题描述】：

我正在尝试使用 angularjs 做一个带有验证的表单，到目前为止我做得很好。但是当我提交我的重置按钮时，所有字段都会重置，除了我从验证部分得到的错误消息。重置表单时如何消除所有字段和错误消息。

这就是我按下重置按钮时的样子

这是我的代码

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

我的控制器

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

【问题讨论】：

贴出重置代码？
按钮中是否有它自己。我给了 type="reset".it 清除表单但不清除错误消息
试试 $scope.user = undefined;
您尝试删除type="reset" 吗？
当我删除 type = 'reset' 它不会重置

标签： javascript html angularjs validation

【解决方案1】：

我的表单在另一个范围内，所以我的解决方案需要使用 $$postDigest

$scope.$$postDigest(function() {
    $scope.form.$error = {};
});

【讨论】：

【解决方案2】：

对我来说，使用 $setPristine 重置表单是一种 hack。真正的解决方案是保持它应有的样子：

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

然后在角度：

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

就是这样。

【讨论】：

【解决方案3】：

var original = $scope.user;

重置时：

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

删除

type='reset' in  <button>

这里是表单控制器的 Angular Documentation。

【讨论】：

把var original = $scope.user;放到reset函数外面
我把它放在了重置功能之外，还是不行
@CraZyDroiD 试试 $scope.user = undefined;
我做到了。我不知道为什么，但是当我单击重置按钮时，它正在执行我的提交按钮应该执行的操作。奇怪
不要忘记尝试在 Angular 1.3 中引入的 $scope.userForm.$setUntouched() / $touched 标志！

【解决方案4】：

我在按钮中保留了type="reset"。我所做的是ng-click="resetForm(userForm)"（使用userFrom 来匹配您的示例）和控制器将resetForm() 定义为

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

会发生什么：

当点击重置按钮时，它将恢复输入上value属性指定的原始值
$commitViewValue() 将强制将当前视图中的任何内容写入每个字段的$modelValue（无需手动迭代），否则最后一个$modelValue 仍将被存储而不是重置。
$setPristine() 将重置任何其他验证和提交的字段。

在我的angular-bootstrap-validator 中，我已经有了FormController，因此我不需要传递表单本身。

【讨论】：

【解决方案5】：

在我的表单中

<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 是我的表单名称。

【讨论】：

【解决方案6】：

给我们您的反馈

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

【讨论】：

【解决方案7】：

我跟...

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

感觉很老套……但很多关于 Angular 的感觉。

此外...这是唯一有效的方法。

【讨论】：

【解决方案8】：

要重置验证，我们必须做两件事：

清除字段

添加以下内容：

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

programCreateFrm 是表单的名称。例如：

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

这段代码对我有用。

【讨论】：

【解决方案9】：

如果您没有主服务器（来自服务器的动态模型），并且您想重置表单但只重置模型的绑定部分，您可以使用这个 sn-p：

  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>

【讨论】：

非常有帮助！这也解决了重置 ngModel 值的问题。故意将其设置为 null 并将其提交给 ngForm 就可以了。

【解决方案10】：

FormController 上有 API 文档。

这让我发现还有其他方法可以调用，例如：

$setUntouched() - 这是我在用户专注于该字段然后离开该字段时使用的功能，当您运行它时会清除此功能。

我创建了一个简单的表单重置功能，您也可以使用它。

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

在您的表单中，这个简单的设置将允许您重置表单

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

【讨论】：

$setUntouched(); 是我缺少的链接
很高兴我能帮上忙！

【解决方案11】：

使用以下方法重置脏状态

$scope.form.$setPristine();

使用以下重置清除验证

$scope.form.$setValidity();

【讨论】：

【解决方案12】：

我遇到了同样的问题并使用以下代码完全重置表单：

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

【讨论】：

【解决方案13】：

使用这个

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

在控制器中

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

它对我有用

【讨论】：

@CraZyDroiD 我已经更新了答案，现在试试，如果您在控制台中遇到任何错误，请告诉我。