Question

我知道已多次询问过，我已经阅读了其他问题，但我的问题仍然存在。我有一个简单的表单，我希望验证在成功提交后消失。

这是一个吸虫：

function FormController($scope) {
  $scope.formData = {
    firstname: 'Eugene',
    lastname: 'Crabs',
    username: 'MrCrabs'
  };
  $scope.submit = submit;

  function submit() {
    if ($scope.someForm.$invalid) {
      return;
    }
    $scope.formData = {};
    $scope.someForm.$setUntouched();
    return;
  }
}

http://plnkr.co/edit/cJYStvlveHvAxhlza0Q0?p=preview

这是一项简单的任务，它不会那么难。我错过了什么？

Answer 1

这是一个非常有趣的话题;我相信这个分叉的plunker能做你想做的事：http://plnkr.co/edit/RSSFFBmJ6MZtX3aaoNLb?p=preview

关键实施点是：

在范围

enableMessages

按下提交按钮后，在验证之前制作标记true

将错误消息显示条件更改为：

<span ng-show="someForm.firstname.$error.required && (someForm.firstname.$dirty || enableMessages)">Please enter your firstname</span>

它显示“如果字段有错误并且用户已触摸该消息，则显示此消息或者为整个表单启用消息”。

在HTML中放置这么长的条件是一种不好的做法，所以我会考虑编写一个辅助函数，例如（未经编辑的代码）：

$scope.showCondition = function(fieldName, validatorName) { return $scope.someForm[fieldName].$error[validatorName] && ($scope.someForm[fieldName].$dirty || enableMessages); };

ng-show变得更加简洁：

<span ng-show="showCondition('firstname', 'required')">Please enter your firstname</span>

在这种情况下，enableMessages不再是范围变量，而是控制器的私有var。

Answer 2

在您的情况下将ng-show更改为

（someForm.username。$ dirty ||提交）

代码

<div class="error-message" ng-show="(someForm.username.$dirty || submitted)">

注意：必须提交，而不是表单。$ submit

在控制器中更新你的功能

$scope.submit = function() {
    // set form is submitted
    $scope.submitted = true;

    if ($scope.someForm.$invalid) {
      return;
    }


    $scope.formData = {};

    // set form default state
    $scope.someForm.$setPristine();

    // set form is no submitted
    $scope.submitted = false;

    return;
  }

并且有效

提交后重置表单

2 个答案: