调用ng-submit方法后，表单验证会再次触发

Question

我在rails + angular应用程序中工作，我在同一页面上有一个帖子索引页面和post create form。

我有一个用标题和内容字段创建帖子的表单，我在两个字段上添加了验证，这对表单提交和字段模糊事件起了作用。

<div class="container-right">
  <form ng-submit=" post_form.$valid && addPost()" style="margin-top:30px;" name="post_form" novalidate>
    <fieldset>
      <legend>New Post</legend>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Post Title" ng-model="post.title" ng-model-options= "{ updateOn : 'default blur'}"name="title" ng-minlength="4" required></input>

        <span ng-show="post_form.$submitted || post_form.title.$touched && post_form.title.$invalid ">
          <div ng-messages="post_form.title.$error">
            <span class="error" ng-message="required">Title is Required</span>
            <span class="error" ng-message="minlength">Use Atleast 4 charater long Title</span>
          </div>
        </span>

      </div>

      <div class="form-group big_input_box">
        <textarea rows="2"  class="form-control" placeholder="Description Of Your Title..." ng-model="post.content" name="content" ng-minlength="10" required></textarea>

        <span ng-show="post_form.$submitted || post_form.content.$touched && post_form.content.$invalid">
          <div ng-messages="post_form.content.$error">
            <span class="error" ng-message="required">We need Your Post description</span>
            <span class="error" ng-message="minlength">Please keep your description atleast 10 charater Long.</span>
          </div>
        </span>

      </div>

      <div>
        <button type="submit" class="btn btn-primary">Post</button>
      </div>
    </p>
    </fieldset>
  </form>

成功验证或ng-submit方法

• 我在帖子表中添加了帖子数据。
• 清除帖子表单字段
• 并在post_list数组中添加新添加的帖子。

调用ng-submit的方法

  //  Add a new Post
  $scope.addPost = function() {
    if($scope.post.title) {
      $http.post("/posts.json", {post: $scope.post}).success(function(data){

        // Add newly added post in post list
        $scope.posts_list.push(data);

        Flash.create("success", "Post Successfully Created")

        //clear out the form field
        $scope.post.title = ''
        $scope.post.content = ''
      })
    }
  }

在该行动之后，两个字段的验证再次发生。

我尝试了一些解决方案，比如清除$ scope.post，停止默认传播，但没有得到解决方案。

提前致谢。

您可以查看附件图片 - http://i.stack.imgur.com/2QLi8.jpg

Answer 1

Angular在您提交表单后会记住您的表单状态 成功提交表单后，您需要重置此表单的状态。 因此，在清除模型后 - 您需要使用函数post_form和$setPristine()

重置$setUntouched()的状态

  $scope.addPost = function() {
    if($scope.post.title) {
      $http.post("/posts.json", {post: $scope.post}).success(function(data){

        // Add newly added post in post list
        $scope.posts_list.push(data);

        Flash.create("success", "Post Successfully Created")

        //clear out the form field
        $scope.post.title = ''
        $scope.post.content = ''

    // Here is what you need to do:
        $scope.post_form.$setPristine();
        $scope.post_form.$setUntouched();
      })
    }
  }

演示：http://plnkr.co/edit/fVMRkcgB30n5VJcANdFe?p=preview