如果电话号码无效，则阻止表单提交 - Angularjs

Question

如果电话输入根据我的 ng-pattern 无效，我想阻止表单提交，而无需在按钮上使用 disabled 。我尝试向 submitForm 函数添加逻辑无济于事。类似的东西......

向我的 Angular 代码添加验证功能：

const validPhone = function (phone) {
          var re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
          return re.test(phone);
        }

并向我的提交函数添加一些逻辑，例如...

if (!this.validPhone(main.contact.phone)) {
                        $window.alert("Please a valid phone number!");
                        return false;
                    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script>
        (function () {
            "use strict";
            angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
            function MainCtrl($document, $timeout, $window) {
                var main = this;
                main.now = new Date();
                main.contact = {
                    phone: "##phone##",
                    company: "##company##"
                };
                main.submitForm = _submitForm;

                function _submitForm() {
                    if (!main.contact.phone) {
                        $window.alert("Please enter your phone number!");
                        return false;
                    }

                    if (!main.contact.company) {
                        $window.alert("Please enter your company!");
                        return false;
                    }

                    $timeout(function () {
                        $document[0].forms[0].submit();
                    }, 0);
                }
            }
        })();
    </script>

<form method="post" id="f" novalidate name="mainForm">
                                    <div class="input-field">
                                        <input type="text" placeholder="Phone *" value="##phone##" name="phone"
                                            ng-model="main.contact.phone" required
                                            style="margin-bottom: 0; margin-top: 16px"
                                            ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im" />
                                        <small class="form-text rz-error" ng-show="mainForm.phone.$error.required">This
                                            field is
                                            required.</small>
                                        <small class="form-text rz-error" ng-show="mainForm.phone.$error.pattern">
                                            Doesn't look like a valid phone number!</small>
                                    </div>
                                    <div class="input-field">
                                        <input type="text" placeholder="Company *" name="company"
                                            ng-model="main.contact.company" value="##company##" required
                                            style="margin-bottom: 0; margin-top: 16px" />
                                        <small class="form-text rz-error"
                                            ng-show="mainForm.company.$error.required">This field is
                                            required.</small>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="callback_request"
                                            value="yes" style="margin-bottom: 0; margin-top: 16px" />
                                        <label class="form-check-label" for="flexCheckDefault">
                                            I would like a call & a free audit.
                                        </label>
                                    </div>


                                    <div class="input-field">
                                        <input type="submit" class="button alt" value="Download Now"
                                            ng-click="main.submitForm()" style="margin-bottom: 0; margin-top: 16px" />
                                    </div>
                                    <div style="margin-top: 10px">
                                        <small><em class="text-muted">* Denotes a required field.</em></small>
                                    </div>
                                </form>

Answer 1

执行以下操作：

<form (keydown.enter)="validateFunction($event)"></form>

然后将您的逻辑放入 validate 函数中，并在需要时执行 $event.preventDefault()。

Answer 2

我从按钮中删除了禁用并添加了逻辑以检查我的 angular.js 代码中的有效电话号码：

<script>
        (function () {
            "use strict";
            angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
            function MainCtrl($document, $timeout, $window) {
                var main = this;
                main.now = new Date();
                main.contact = {
                    phone: "##phone##",
                    company: "##company##"
                };
                main.submitForm = _submitForm;
                main.validPhone = _validPhone;

                function _submitForm() {
                    if (!main.validPhone(main.contact.phone)) {
                        $window.alert("Please enter a valid phone number!");
                        return false;
                    }

                    if (!main.contact.company) {
                        $window.alert("Please enter your company!");
                        return false;
                    }

                    $timeout(function () {
                        $document[0].forms[0].submit();
                    }, 0);
                }

                function _validPhone(phone) {
                    const re =
                        /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
                    return re.test(phone);
                }
            }
        })();
    </script>