Form Validation with ngClass and AngularJS not working

Question

I am new to angular and am trying (and failing) to get the ngClass to work with some validation on a basic contact form.

I want to highlight the inputs when they are in the success/error by highlighting with bootstrap 'has-error' and 'glyphicon-remove' classes if there are any issues with the data.

my form is as follows;

<form class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
                    <div class="col-md-12">
                        <h2>Quick Form</h2>
                        <div class="form-group has-feedback">
                            <div class="input-group col-md-12">
                                <label for="titleSelect" class="input-group-addon">Title :</label>

                                <select name="titleSelect" id="titleSelect" class="form-control"
                                        ng-model="form.titleResult" required>
                                    <option value="">Select Title...</option>
                                    <option ng-repeat="option in titles" value="{{option.name}}">{{option.name}}</option>
                                </select>
                            </div>
                            <div class="input-group col-md-12" ng-class="{ 'has-error': form.name.$invalid, 'text-success' : form.name.$valid}">
                                <label for="nameInput" class="input-group-addon">Name :</label>
                                <input type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="form.name" required>
                                <span ng-class="{ 'glyphicon-remove' : form.name.$invalid, 'glyphicon-ok' : form.name.$valid }" class="glyphicon form-control-feedback"></span>
                            </div>

                            <div class="input-group col-md-12">
                                <label for="postcodeInput" class="input-group-addon">Postcode :</label>
                                <input type="text" class="form-control" id="postcodeInput" placeholder="Postcode..." ng-model="form.postcode" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="emailInput" class="input-group-addon">Email :</label>
                                <input type="email" class="form-control" id="emailInput" placeholder="Email Address..." ng-model="form.email" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="telephoneInput" class="input-group-addon">Telephone :</label>
                                <input type="text" class="form-control" id="telephoneInput" placeholder="Telephone Number..." ng-model="form.telephone" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="timeSelect" class="input-group-addon">To to Call :</label>

                                <select name="timeSelect" id="timeSelect" class="form-control"
                                        ng-model="form.timeResult" required>
                                    <option value="">Select Time...</option>
                                    <option ng-repeat="option in times" value="{{option.name}}">{{option.name}}</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-block" ng-click="submit(form)">Request Callback!</button>
                            </div>
                        </div>
                    </div>
                </form>

my controller is as follows;

'use strict';
app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.titles =
   [
  { id: '1', name: 'Mr.' },
  { id: '2', name: 'Mrs.' },
  { id: '3', name: 'Master.' },
  { id: '4', name: 'Miss.' },
  { id: '5', name: 'Sir.' },
  { id: '6', name: 'Dr.' },
  { id: '7', name: 'Other.' }
   ];

$scope.times = 
           [
  { id: '1', name: 'Morning.' },
  { id: '2', name: 'Afternoon.' }
           ];

$scope.submit = function (form) {

    console.log(form);
};

}]);

However, the ngclass directive is not being applied? also it seems that the submit is being called even when the form is invalid? do I need to validate the form fromthe controller as well?

Answer 1

Add a name attribute and value to your form tag & input...

<form name="form" class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
&
<input name="name" type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="name" required>

because when you refer to form.name in 'has-error': form.name.$invalid it works based off of the name of the form and the name of the input box

Note there is a conflict using form.name as your ng-model based upon your controller you will want ng-model="name"

Here is a working plnkr