Angular.js Dynamic Form input types

Question

I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.

So firstly, I have a JSON object (called fields):

[
  {"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
  {"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
  {"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
  {"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
  {"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
  {"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
  {"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]

The object key type is the input type for a form. See below:

<p ng-repeat="field in fields">
  {{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>

Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.

If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.

If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.

Why won't it let me set an input type as a file dynamically?

Actually it is browser depended... somewhere it works, somewhere not. — Valentyn Shybanov
– Valentyn Shybanov, Commented Feb 19, 2013 at 10:13

Community · Accepted Answer · 2017-05-23 12:23:53Z

2

Topic if changing type property if <input> element is hot topic.

Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).

Here you can read some discussion about possibility to change type: change type of input field with jQuery

Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371

If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Feb 19, 2013 at 10:13

Valentyn Shybanov

19.4k7 gold badges68 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Angular.js Dynamic Form input types

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related