How display names of wrong fields in form Angular?

Question

How display names of wrong fields in form Angular?

Now I use condition in HTML:

ng-submit="appointment.$valid && AppointmentSubmit()"

But my form is not sent by method AppointmentSubmit(). How I can see what is wrong in appointment.$valid?

Also I tried:

ng-submit="appointment.AppointmentSubmit()"

but button is disabled although all fields is filled.

I think problem in this:

<select name="mouth" ng-model="month" ng-required="true" class="ng-pristine ng-invalid ng-invalid-required" required="required"><option value="? undefined:undefined ?"></option>
<option value="0">A</option>
<option value="1">Yanvar</option>
<option value="2">Fevral</option>
<option value="3" selected="selected">Mart</option>
</select>

Angular adds a new option '' in each select. Why does it happens?

angularjs

Answer 1

As explained here, Angular adds an 'undefined' option at the beginning of the select:

when a value referenced by ng-model doesn't exist in a set of options passed to ng-options

So the solution to this would be to set the initial value of your model to one of the options of the select. For example, something like this:

$scope.selectData = [
    {id: 0, value: 'A'},
    {id: 1, value: 'Yanvar'},
    {id: 2, value: 'Fevral'},
    {id: 3, value: 'Mart'}
];

$scope.month = selectData[0].id;

Now, as of how to know which field is giving you an error, there's the CSS aproach. Angular adds a css class to the fields that are giving you an error, such class is called 'ng-invalid'. You could add styling to your form fields for when the 'ng-invalid' class is added, so the user can (visually) know which fields are wrong.

Example (extracted from the AngularJs Documentation):

.my-form.ng-invalid {
    background: red;
    color:white;
}