Angularjs form validation input field without name

Question

How to track input field validation within form without using field name or field name as array e.g. user[user_name]?

Sample Code:

<div ng-class="{ 'has-error' : saveUserForm.user[first_name].$invalid && !saveUserForm.user[first_name].$pristine }">
   <input type="text" value="{{userAttr.first_name}}" required ng-model="userAttr.first_name" name="user[first_name]" id="inputFirstName">
</div>

Using array name "user[first_name]" for form field is not working, and I can not change it to simple name like "firstName".

Can I use id of the field "inputFirstName" here: saveUserForm.inputFirstName.$invalid ?

BTW it is ng-model. But I don't want to track its value, I need to track if the field is valid or not so that I can add error class to the field e.g. ng-class="{error: userForm.userName.$invalid}" — Mohit Kumat
– Mohit Kumat, Commented May 10, 2014 at 11:25
Name is required as it is used to create ngModelController. Also i don't think you can give an expression in the name. — Chandermani
– Chandermani, Commented May 10, 2014 at 12:17

gkalpak · Accepted Answer · 2014-05-26 13:24:09Z

1

The name attribute is required*, but Angular is not peeky about the name. It is OK if the name is user[first_name], as long as it is referenced correctly.

Assuming a name like this: name="user[first_name]"
You should reference it like this: saveUserForm['user[first_name]'].$...

E.g.

<div ng-class="{'has-error':saveUserForm['user[first_name]'].$invalid&&
                            !saveUserForm['user[first_name]'].$pristine}">

See, also, this short demo.

A little explanation:
In JavaScript saveUserForm.user[first_name] is equivalent to a[b] where a = saveUserForm.user and b = first_name

_{*: You might be able to get away with using no name, by creating a custom directive, get hold of the parent form's FormController and add the elements using its $addControl() method, but there is really no need to.}

edited May 26, 2014 at 13:24

answered May 10, 2014 at 14:03

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohit Bhansali Over a year ago

Hey. Is there is any way to validate form without using name attribute. I don't know, if I add name="objectvo.fieldname", by default I am getting [object object].

gkalpak Over a year ago

I have already answered your question in my answer :)If you face any specific issue, please post a question.

Collectives™ on Stack Overflow

Angularjs form validation input field without name

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related