Question

我有一个在模态指令（引导程序UI）中弹出的表单。我有2个输入html5验证：＆＃34;必需＆＃34;。

在控制器中我想知道表单是否有效，然后进入服务器。在我遇到范围问题后（当我试图提供$ scope.FormName。$ valid时），我通过ng-click发送表单名称找到了解决方案。

然后我看到控制器代码显示表单有效（即使必填字段为空）。如何在提交表格之前检查表格是否有效。

这是我的代码：

表单在html中

 <form name="EmailForm"> 
    <div class="row">
        <div class="col-md-1 lbl_hdr">
            date:
        </div>
        <div class="col-md-1">
            {{Curr_Date  | date:'dd/MM/yyyy'}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-1">
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 lbl_hdr">
                    from:
                </div>
                <div class="col-md-1">
                    <input type="email" required placeholder="email" />
                    <br />
                    <br />
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 lbl_hdr">
                    message:
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <textarea class="msg_text" required rows="5"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <button type="submit" ng-click="SendEmail(EmailForm)" class="btn btn-primary btn_padded_top">send</button>
                    <button type="button" class="btn btn-primary btn_padded_top pull-left" ng-click="$close();">cancel</button>
                </div>
            </div>

        </div>
    </div>
</form>

控制器

        $scope.openModal = function () {
        var modalInstance = $modal.open({
            templateUrl: '/js/app/templates/msg_modal.html',
            controller: function ($scope) {
                $scope.Curr_Date = new Date();

                $scope.SendEmail = function (EmailForm) {
                    if (EmailForm.$valid) {
                        EmailService.sendEmail("sdsd").success(
                            function (data) {
                            });
                    }//if valid
                };
            },
            size: size
        });
    };

＆＃34; if（EmailForm。$ valid）＆＃34; =永远是真的

Answer 1

我遇到了同样的问题，结果是表单元素必须有ng-model才能启动AngularJS验证。

所以只需将它添加到所有元素中它就应该是好的，例如。

<input type="email" required placeholder="email" ng-model="email" />

Answer 2

尝试使用ng-submit并在参数中发送有效的EmailForm。$。

<form name="EmailForm" ng-submit="SendEmail(EmailForm.$valid)"> 
    <div class="row">
        <div class="col-md-1 lbl_hdr">
            date:
        </div>
        <div class="col-md-1">
            {{Curr_Date  | date:'dd/MM/yyyy'}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-1">
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 lbl_hdr">
                    from:
                </div>
                <div class="col-md-1">
                    <input type="email" required placeholder="email" />
                    <br />
                    <br />
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 lbl_hdr">
                    message:
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <textarea class="msg_text" required rows="5"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <button type="submit" class="btn btn-primary btn_padded_top">send</button>
                    <button type="button" class="btn btn-primary btn_padded_top pull-left" ng-click="$close();">cancel</button>
                </div>
            </div>

        </div>
    </div>
</form>

然后：

$scope.openModal = function () {
var modalInstance = $modal.open({
    templateUrl: '/js/app/templates/msg_modal.html',
    controller: function ($scope) {
        $scope.Curr_Date = new Date();

        $scope.SendEmail = function (isValid) {
            if (isValid) {
                EmailService.sendEmail("sdsd").success(
                    function (data) {
                    });
            }//if valid
        };
    },
    size: size
});

};

角度控制器显示模态形式是有效的，当它不是时

2 个答案: