ng-show Not Showing When input is invalid

Question

I am having trouble with form validation in AngularJS. I am trying to show a div based on whether an input is invalid. Angular is putting the correct classes on my inputs (ng-touched and ng-invalid) but it is still keeping the div with a 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>

Looking at other errors I made sure that the ng-show was using the formName.inputName and that the app and controller were working correctly. The button is disabled correctly when the form is invalid which leads me to believe that the controller and app are not the problem.

I tried using ng-messages which changed my phone portion of the form to

<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 is still adding the correct classes to the input but it is still not displaying. I believe the ng-if is evaluating false. Oddly, when I run

{{contactForm.phone.$dirty}} 

in the console it is coming back as undefined

Answer 1

Take a look here and you can see how I got it working. I'll break down the steps below. https://plnkr.co/edit/LJYurBObZsS6ptlVKxvP?p=preview

With the change to using ng-messages, you need to include that module in your app. I wasn't sure if you had made this change or not, but it's straightforward. Include the script for the library, and then update your modules to include ngMessages as a dependency.

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

The second part is fixing a typo. In your html for the contact method area, you have

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

You're reusing the name "phone" there, which is going to cause problems since you'll have two different form items with the same name. Probably change those inputs to emailPreference and phonePreference or something to be clear.

As soon as I cleaned that up, it started working. So I think you were all there, just this typo was getting you.