I encountered an issue while trying to submit a form inside ng-repeat, resulting in the following error:
TypeError: Cannot read property 'comment' of undefined
If I move the comment form outside of ng-repeat, it works perfectly fine. How can I successfully submit a form inside ng-repeat?
I came across a solution on this topic, but I'm struggling to fully understand it.
ng-form inside ng-repeat with submit button outside of ng-repeat
Note: I am using Laravel 5.5 and AngularJS 1.6v for this project.
Main.js
$scope.myposts = [];
// Form that works outside of ng-repeat adding posts which works flawlessly
$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 = '';
};
// Comment form that doesn't work inside ng-repeat
$scope.addComment = function(){
$http.post('/post/comment',{
comment_body: $scope.post.comment,
}).then(function(result){
console.log(result.data);
$scope.myposts.push(result.data);
});
};
HTML
<div id="mypost" class="col-md-10 panel-default" ng-repeat="post in myposts ">
<!-- beginnging of 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">
<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>
<!-- Comment form Inside Ng-repeat -->
<div class="comment-class animated bounceInUp" ng-show="writecomment">
<div class="panel-body">
<ng-form ng-model="commentForm" name="commentForm" method="POST" novalidate>
<div class="form-group">
<label>Write a Comment</label>
<textarea ng-model="post.comment" type="text" class="form-control" name="comment_body" 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>
<!-- END Comment form Inside Ng-repeat -->
</div>
<!-- End of ng-repeat post in mypost -->
</div>