ng-show 当输入无效时不显示

Question

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

form.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>

angular.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 将表单的 phone 部分更改为

<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 仍在将正确的 class 添加到输入中，但仍未显示。我相信 ng-if 正在评估错误。奇怪的是，当我运行

{{contactForm.phone.$dirty}}

在控制台中它返回为未定义

Answer 1

看看这里，您就会知道我是如何让它工作的。我将分解以下步骤。 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>

您在那里重复使用名称 "phone"，这会导致问题，因为您将有两个具有相同名称的不同表单项。可能将这些输入更改为 emailPreference 和 phonePreference 或其他要清楚的内容。

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

ng-show 当输入无效时不显示

ng-show Not Showing When input is invalid

angularjs

angularjs-ng-show

angularjs-validation

angularjs-forms