How display names of wrong fields in form Angular?

Question

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?

appointment.$error: https://docs.angularjs.org/api/ng/type/form.FormController#$error — JB Nizet, Mar 13 '15 at 13:54
Thanks, it gives me: `{"required":false,"minlength":false}` How to know what field is wrong? Version: v1.2.21 — Aliver, Mar 13 '15 at 14:51

score 0 · Accepted Answer · edited May 23 '17 at 12:22

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

Can you advise me what to use in Angular if I want create help function for any controller? — Aliver, Mar 13 '15 at 16:19
Sure, but what do you mean 'help function'? what do you want to achieve with a help function? — Saulo Lozano, Mar 13 '15 at 16:28

How display names of wrong fields in form Angular?

1 Answers1