CODEWITHSUNDEEP
javascriptangularjs
Menztrual
Menztrual

Reputation: 41587

Angular.js Dynamic Form input types

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?

Upvotes: 3

Views: 5609

Answers (1)

Valentyn Shybanov
Valentyn Shybanov

Reputation: 19391

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.

Upvotes: 2

Related Questions