Question

我正在尝试添加评论并将其推送到myposts数组中

我可以成功发帖，但在尝试添加评论时出现网络错误。

这是我得到的错误，不知道为什么它不起作用。

{“message”：“给定的数据是无效。“，”错误“：{”comment_body“：[”评论正文字段是必需的。“]}}

CommentController

public function create(Request $request, Post $post)
{

    $data = request()->validate([
     'comment_body' => 'required|max:1000'
    ]);


    $data['user_id'] = auth()->user()->id;
    $data['name'] = auth()->user()->name;

    $post = Comment::create($data);
    $data['id'] = $post->id;
    $data['created_at'] = $post->created_at->diffForHumans();

    $response = new Response(json_encode($data));
    $response->headers->set('Content-Type', 'application/json'); 

    if(!$response){
        return 'something went wrong';
    }

    return response()->json($data); 


}

main.js

$scope.myposts = [];



$scope.addPost = function(){    
    $http.post('/auth/post', {
        body: $scope.post.body, 
    }).then(function(data, status, headers, config){
        console.log(data);  
        data.data['user'] = {
            name: data.data.name
        },



        $scope.myposts.push(data.data);

    });

    $scope.post.body = '';
};

$scope.addComment = function(){

    $http.post('/post/comment',{
        comment_body: $scope.post.comment_body,
    }).then(function(result){
        console.log(result);
        $scope.myposts.push(result.data);

    });



};

HTML

 <div id="mypost" class="col-md-10 panel-default" ng-repeat="post in myposts  ">
                <div id="eli-style-heading" class="panel-heading"><a class="link_profile" href="/profile/<% post.user.name | lowercase %>"><% post.user.name %></a></div>
                <div class="panel-body panel" ng-init="getLikeText(post); getLikecount(post)">  


                <i style="color:tomato; float:right; font-size:24px;" ng-click="like(post); toggle = !toggle" 
                ng-class="{[noheart] : !post.likedByMe, [heart]: post.likedByMe }">
                    <h3 style="font-size:20px; margin:20px 0px; text-align:center;"  ng-bind="post.likesCount">   </h3>
                </i>


                    <figure>
                        <p class="mybody2" ng-model="post.body" editable-text="post.body" e-form="textBtnForm"> <% post.body %></p>
                        <p name="post.created_at" ><% post.createdAt %> </p>
                    </figure>
                    <span>

                     <i style="color:red;" class="glyphicon glyphicon-remove" ng-click="deletePost(post)" ng-if="post.deletable"></i>


                          <button ng-if="post.update" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
                            Edit
                          </button>

                        <span><button ng-if="post.update" type="submit" class="btn btn-primary" ng-click="updatePost(post)">Update</button></span>
                    </span>
                    <hr>
                    <span class="toggle-comments">
                        <a ng-show="post.comments.length !== 0"  ng-click="comments = !comments" > View Comments</a>
                        <a ng-click="writecomment =! writecomment"> Write A Comment </a>
                    </span>
                </div>


                <div ng-show="comments" id="comments" class="col-md-offset-2  panel-default" ng-repeat="comment in post.comments"> 
                    <div style="font-size:10px;" id="eli-style-heading" class="panel-heading">
                        <h6><% comment.user.name %><h6>
                    </div>
                    <figure>
                        <p style="padding:10px; min-height:50px; word-wrap:break-word;"> <% comment.comment_body%></p>
                    </figure>

                </div>


                 <div class="comment-class animated bounceInUp" ng-show="writecomment">
                    <div class="panel-body">
                        <form ng-model="postForm" name="postform" method="POST" novalidate>
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="comment.title">Write a Comment</label>
                                <textarea ng-model="comment.body" type="text" class="form-control" name="comment" id="" cols="2" rows="2"></textarea>
                            </div>
                            <button id="eli-style-button" ng-click="addComment()" class="btn btn-primary" type="submit">Submit</button>
                        </form>
                    </div>
                </div>


            </div>

Answer 1

您没有向服务器发送comment_body数据，首先您需要将textarea中的ng-model从ng-model =“comment_body”更改为ng-model =“post.comment_body”，然后才能拥有一个好用户经验;你需要在客户端进行一些验证，比如示例代码，最后你应该在尝试保存de数据时处理promise中的拒绝。

$scope.addComment = function(){

    $http.post('/post/comment',{
        comment_body: $scope.post.comment_body,
    }).then(function(result){
        console.log(result);
        $scope.myposts.push(result.data);

    }, function(error){
      // do somethig with server error
      console.log(JSON.stringify(error));
    });



};

<form name="postform" method="POST" novalidate>
	{{ csrf_field() }}
	<div class="form-group">
		<label for="comment.title">Write a Comment</label>
		<textarea 
		ng-required="true"
		ng-model="post.comment_body" class="form-control" name="comment_body" id="" cols="2" rows="2"></textarea>
		<p ng-if="postform.$dirty && postform.comment_body.$invalid }">Required</p>
	</div>
	<button id="eli-style-button" ng-disabled="postform.$invalid" ng-click="addComment()" class="btn btn-primary">Submit</button>
</form>

希望这能帮到你

Angular不在范围

1 个答案: