angularjs 表单隐藏取消隐藏触发验证

Question

我有一个带有验证集的 angularjs 表单。我想在单击显示按钮时取消隐藏它并在单击隐藏按钮时隐藏它。如果我玩输入字段并隐藏然后再次取消隐藏，我仍然会看到我不想要的验证消息。请帮我解决这个问题。

代码如下： Index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <!-- CSS ===================== -->
    <!-- load bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <style>
        body    { padding-top:30px; }
    </style>

    <!-- JS ===================== -->
    <!-- load angular -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
    <script src="script.js"></script>
</head>

<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

    <!-- PAGE HEADER -->
    <div class="page-header"><h1>AngularJS Form Validation</h1></div>

    <!-- FORM -->
    <!-- pass in the variable if our form is valid or invalid -->
    <button type="button" ng-click="unhide()" class="btn btn-primary">Show</button>
    <form ng-show="showForm" name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
<div class="form-group">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="name" required>
  <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group">
  <label>Username</label>
  <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
  <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
  <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="email">
  <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>

        <!-- SUBMIT BUTTON -->
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" ng-click="hide()" class="btn btn-primary">Hide</button>

    </form>

</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

script.js:

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

  // function to submit the form after all validation has occurred            
  $scope.submitForm = function(isValid) {
alert(isValid);
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }

  };
  $scope.hide = function(){
    $scope.showForm = false;
  }

  $scope.unhide = function(){
    $scope.showForm = true;
    $scope.userForm.$setUntouched();
  }
});

下面是 plunker link: http://plnkr.co/49k8P0

Answer 1

要实现预期的行为，您需要对代码进行几处更改。

所有表单字段都应属于一个对象，例如创建一个对象 $scope.user = {}，然后将所有用户相关字段放入您的 user 对象中，例如 user.username、user.name 和 user.email 这样在清除表格时你可以直接做 user = {}
虽然隐藏你需要清除一个form对象，这里的表单对象将是form的名称，其中userForm。

或

更简单的解决方案是使用 ng-if 而不是 ng-show。它将根据 showForm 值添加和删除 DOM。

Demo Here

Answer 2

如果您仍想保留以前在字段中输入的数据但只清除消息，则向范围添加一个变量，该变量在提交表单时设置为 true。验证消息仅在变量为真时显示。然后，您可以在隐藏时将其设置为 false。这意味着当再次显示表单时，消息将被隐藏。

  $scope.hide = function(){
     $scope.showForm = false;
     $scope.submitted = false;
  }

笨蛋：http://plnkr.co/edit/dnBu0mD9RLvLdVJJKBGe

angularjs 表单隐藏取消隐藏触发验证

angularjs form hide unhide triggers validation

forms

validation

hide

angularjs