0

我在 AngularJS 中进行表单验证时遇到问题。我正在尝试根据输入是否无效来显示 div。Angular 将正确的类放在我的输入上（ng-touched 和 ng-invalid），但它仍然将 div 与 ng-hide 类保持一致。

表单.html 

                <form id="" name="contactForm"
                ng-submit="postForm()" novalidate>
                <div class="form-group row">
                    <label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Name</label>
                    <div class="col-lg-10 col-md-9 col-xs-8">
                        <input class="form-control" type="text" placeholder="Jon Doe"
                            id="full-name" required data-ng-model="formData.name">
                    </div>
                </div>
<!-- This is the only input implemented with the errors -->
                <div class="form-group row">
                    <label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
                        Number</label>
                    <div class="col-lg-10 col-md-9 col-xs-8">
                        <input class="form-control" type="tel"
                            placeholder="(630) 555-6723" id="phone-number" required
                            data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
                            </div>
                        <div ng-show="(contactForm.phone.$invalid && contactForm.phone.$touched) || contactForm.phone.$error.minlength">Please enter a valid phone
                            number.</div>

                </div>
                <div class="form-group row">
                    <label for="email" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Email</label>
                    <div class="col-lg-10 col-md-9 col-xs-8">
                        <input class="form-control" type="email"
                            placeholder="jon.doe@gmail.com" id="email" required
                            data-ng-model="formData.email" />
                        <div class="invalid-feedback">Please enter a valid email.</div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label">Contact Method</label>
                    <div class="col-lg-2 col-md-3 col-xs-4">
                        <label class="custom-control custom-radio"> <input
                            id="radio1" name="email" type="radio"
                            class="custom-control-input" checked="checked"
                            data-ng-model="formData.pref"> <span
                            class="custom-control-indicator"></span> <span
                            class="custom-control-description">Email</span>
                        </label> <label class="custom-control custom-radio"> <input
                            id="radio2" name="phone" type="radio"
                            class="custom-control-input" data-ng-model="formData.pref">
                            <span class="custom-control-indicator"></span> <span
                            class="custom-control-description">Phone</span>
                        </label>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Body</label>
                    <div class="col-lg-10 col-md-9 col-xs-8">
                        <textarea rows="15" class="form-control"
                            placeholder="Type your message here..." id="body-text" required
                            data-ng-model="formData.body"></textarea>
                        <div class="invalid-feedback">Please enter a message here.</div>
                    </div>
                </div>
                <div class="text-center">
                    <button ng-disabled="contactForm.$invalid" class="btn-primary btn" type="submit">Submit</button>
                </div>
            </form>
</div>

角.js

    <!-- SCRIPTS -->
<script>
    //form validate

    var app = angular.module('contactUs', []);
    app.controller('formCtrl', function($scope, $http) {
        $scope.formData = {};
        $scope.postForm = function() {
            $('#loadingScreen').modal('show');
            $http({
                url : '/api/v1/contact',
                method : 'POST',
                data : $.param($scope.formData),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .then(function onSuccess() {
                console.log("success");
                window.scrollTo(0,0);
                $('#success-message').show();
            }, function onError(){
                console.log("error");
                window.scrollTo(0,0);
                $('#error-message').show();
            })
            .then(function() {
                $('#loadingScreen').modal('hide');
            })
        }
        $scope.formData = {};
    });
</script>

查看其他错误，我确保 ng-show 正在使用 formName.inputName 并且应用程序和控制器工作正常。当表单无效时，该按钮被正确禁用，这使我相信控制器和应用程序不是问题。

我尝试使用 ng-messages 将表单的电话部分更改为

<div class="form-group row">
                    <label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
                        Number</label>
                    <div class="col-lg-10 col-md-9 col-xs-8">
                        <input class="form-control" type="tel"
                            placeholder="(630) 555-6723" id="phone-number" required
                            data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
                            </div>
                        <div ng-messages="contactForm.phone.$error" class="error" ng-if="contactForm.phone.$dirty">
                            <div ng-message="required">Please enter a phone number we can reach you at.</div>
                            <div ng-message="pattern">Please enter a valid phone number here.</div>
                            <div ng-message="minlength">Please enter a phone number that's atleast 10 digits</div>
                        </div>

                </div>

Angular 仍在向输入中添加正确的类，但仍然没有显示。我相信 ng-if 评估错误。奇怪的是，当我跑步时

{{contactForm.phone.$dirty}}

在控制台中它以未定义的形式返回

4

1 回答 1

2

看看这里，你可以看到我是如何工作的。我将分解以下步骤。https://plnkr.co/edit/LJYurBObZsS6ptlVKxvP?p=preview

随着使用 ng-messages 的更改，您需要将该模块包含在您的应用程序中。我不确定您是否进行了此更改，但这很简单。包含库的脚本，然后更新您的模块以包含 ngMessages 作为依赖项。

var app = angular.module('contactUs', ['ngMessages']);

第二部分是修正一个错字。在您的联系方式区域的 html 中，您有

<label class="custom-control custom-radio">
        <input id="radio2" name="phone" type="radio" class="custom-control-input" data-ng-model="formData.pref">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Phone</span>
</label>

您在那里重用了名称“电话”，这将导致问题，因为您将拥有两个具有相同名称的不同表单项。可能将这些输入更改为 emailPreference 和 phonePreference 或其他需要明确的内容。

我一清理它，它就开始工作了。所以我认为你都在那里，只是这个错字让你失望了。

于 2017-09-19T19:58:00.623 回答