如何正确处理Angularjs中的嵌套表单

时间:2014-11-07 01:54:31

标签: angularjs forms validation angularjs-ng-repeat angularjs-ng-form

我在我的网络应用程序的前端使用angularjs。我目前有一个评论视图,其中包含多个回复和编辑表单(由于ng-repeat)。我怎样才能重写下面的代码,因此表单验证可以适当地应用于每个表单(目前代码只显示回复注释的表单)。我尝试过使用ng-form,但是我没有成功。

<div class="comments">
<div ng-hide="comments.length>0||angular.isUndefined(comments)" ng-cloak>
    <p class="center">No comments yet, be the first one!</p>
</div>
<div class="comment clearfix" ng-repeat="comment in comments track by $index"
     style="padding-left:{{comment.margin}}px">

    <div class="body" style="padding-left:60px">

        <span ng-hide="comment.edit_mode">{{comment.comment}}</span>

        <div ng-show="comment.edit_mode">
            <textarea msd-elastic="" ng-model="comment.comment" class="form-control" rows="1">{{comment.comment}}</textarea>
        </div>

    </div>

    <div class="add-comment reply" ng-show="open_reply" ng-cloak>

        <form name="form.replyForm" class="form-inline clearfix" role="form"
              ng-submit="Submit(reply.comment,story.id,reply.anonymous,comment.comment_id,$index);open_reply=false;reply.comment=''"
              novalidate>
            <div id="comment-form">
                <img ng-src="{{user.avatar}}" alt="" class="avatar"/>
                    <span>
                        <textarea msd-elastic ng-model="reply.comment" class="form-control message" rows="1"
                                  placeholder="Add a comment..." ng-click="show_reply_anonymous_checkbox=true"
                                  focus-on="open_reply" name="comment" required></textarea>
                        <span style="color:red" ng-show="form.replyForm.comment.$error.required">test</span>
                    </span>
                <button type="submit" ng-disabled="form.replyForm.$invalid"
                        class="btn btn-primary submit">
                    Reply
                </button>
            </div>
        </form>
    </div>
</div>

0 个答案:

没有答案