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

The angular controller shows the modal form is valid, when it's not

本文关键字：有效 显示 模态 控制器      更新时间：2023-09-26

我有一个窗体，弹出在一个模态指令(bootstrap UI)。我有两个输入与html5验证:"required".

在控制器中，我想找出表单是否有效，然后继续到服务器。在我遇到作用域问题后(当我试图引用$scope.FormName.$valid时)，我通过使用ng-click.

发送表单名称找到了解决方案。

然后我看到控制器代码显示表单是有效的(即使所需字段为空)。如何在提交之前检查表单是否有效?

下面是我的代码:

form in 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
        });
    };

"如果(EmailForm有效)美元。"= always true

我有同样的问题，结果证明，表单元素必须有ng-model为了让AngularJS验证启动。

所以只要把它添加到所有元素中，它应该都很好，例如

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

尝试使用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
});

};

相关文章：