Angular Validation - Not showing message

Question

Basically I have angularjs validation ready to go on the example below.

<input type="text" maxlength="60" class="form-control" id="inputFirstName" name="firstName" placeholder="" ng-model="formData.firstName" required="">
    <div ng-show="admission-form.$submitted || admission-form.firstName.$touched">
        <span ng-show="admission-form.firstName.$error.required">First Name is required<br></span>
    </div>

So I can get the css to highlight the field when invalid but I still am not getting the message to show. I see that from chrome's dev tools that both ng-invalid-required and ng-touched are on the firstName input. What am I missing?

Some other notes: I do have the form named admission-form but it is on another html file and directed to it from angular-ui-router. All the form pages are nested under the same controller.

Let me know if there is any other information that would be helpful. I am still fairly new to angular.

********EDIT********

As requested the state config. The page goes index.html nests form.html which nests each page of the form. The one for this input in the personalInformation.html page.

angular.module('admissionsApp', ['ui.router', 'ui.mask', 'ui.bootstrap'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
    // route to show our basic form (/form)
    .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeController'
    })
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'FormController'
    })
    .state('form.personalInfo', {
        url: '/personalInfo',
        templateUrl: 'personalInformation.html'
    })

Do you have a name property set on your form? I don't have a way to check it quickly but I don't believe the admission-form is a correct name. Try changing it from name="admission-form" to name="admissionForm" and then <div ng-show="admissionForm.$submitted" ...... — Tomek Sułkowski
– Tomek Sułkowski, Commented Jul 20, 2017 at 18:32
@TomekSułkowski ..... wow that was it. Didn't realize that the "-" was not allowed. Thanks so much. If you post it as the answer I will accept it. — Crash667
– Crash667, Commented Jul 20, 2017 at 18:47
@Crash667 Ok, I'll add an answer with the actual reasoning behind it so it doesn't seem magical ;) — Tomek Sułkowski
– Tomek Sułkowski, Commented Jul 20, 2017 at 19:43

Tomek Sułkowski · Accepted Answer · 2017-07-20 20:00:41Z

Looking at the AngularJS documentation

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

What it means is that when you add a name attribute on a <form> element in AngularJS (e.g. <form name="myForm">) it creates a form object on the $scope, so it's like you would do sth like $scope.myForm = ... in your controller.

When you put <form name="admission-form"> in your template, Angular tried to create a $scope.admission-form = ... property which, as an JavaScript expression doesn't make sense, so it just failed miserably and didn't create anything.

And AngularJS being AngularJS, when it encounters something weird in a template it did it silently, with no errors in the ...

Collectives™ on Stack Overflow

Angular Validation - Not showing message

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related