javascript - Angular Controller 显示模态形式是有效的，当它不是

Question

我有一个在模态指令(引导 UI)中弹出的表单。 我有 2 个带有 html5 验证的输入:“必需”。

我想在 Controller 中查明表单是否有效，然后转到服务器。在我遇到范围问题后(当我尝试引用 $scope.FormName.$valid 时)，我通过使用 ng-click 发送表单名称找到了解决方案。

然后我看到 Controller 代码显示表单有效(即使必填字段为空)。 如何在提交前检查表单是否有效。

这是我的代码:

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

“if (EmailForm.$valid)”= 始终为真

Answer 1

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

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

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