Setting type="{{value}}" and value = file with angular?

Question

I'm looping through an array called fieldset.fields

Everything works fine, except when it comes to this:

type="{{field.type || 'text'}}"

most values work, 'like' test and 'asdf' but if i set the the field.type = file, and look in the inspector, it says type="text", removing the default attribute(type="{{field.type}}") doesn't help either.

sample array: { label: 'First Name', name: 'firstname', key: 'entry.810220554', type: 'text', required: true }, { label: 'Bild', name: 'image', key: 'entry.810220554', type: 'file', required: true },

full template:

<div 
        ng-repeat="field in fieldset.fields"
        ng-switch="field.type"
>
        <div class="fieldset" ng-switch-when="radio" class="options">
            <!--radiobuttons-->
            <div class="radiobutton" ng-repeat="mylabel in field.labels">
                <input
                    type="radio" 
                    name="{{field['key']}}"
                    value="{{mylabel.name}}" 
                    id="{{mylabel.name}}"
                    ng-model='$parent.my_radio_button'
                    ng-class='{ selected: (my_radio_button == mylabel.name) }'
                >
                <label for="{{mylabel.name}}">
                    {{mylabel.label}}
                </label>
            </div>
         </div>


        <label 
            ng-switch-default
            for="{{field.name}}"
            >                           
            {{field.label}}
        </label>
        <!--text-input-->
        <input
            ng-switch-default
            type="{{field.type || 'text'}}" 
            name="{{field.key}}"  
            id="{{field.name}}" 
            ng-required="field.required"
        />
    </div>
</div>

Jonathan Rowny · Accepted Answer · 2013-10-02T14:47:10.880

1

Looks like this is a problem in Chrome. Chrome cannot change the input type of a field to 'file' once it's created the element. Changing the type to Checkbox works, file is the only one I found that doesn't work yet..

I put your sample in a plnkr and it works fine in firefox: http://plnkr.co/edit/tCSZDz9xjI2Hla3rNQ97?p=preview

But even if I manually tweak the input type to "file" in chrome devTools, it won't render a file input.

Solution: For now think your best solution is to actually create the element. This is pretty easy to do using a custom directive. It should be unnecessary but I think that's what you'll have to do.

edited Oct 02 '13 at 14:47

answered Oct 02 '13 at 14:26

Jonathan Rowny

7,588
1
18
26

1

I created a bug for this: https://code.google.com/p/chromium/issues/detail?id=303117 – Jonathan Rowny Oct 02 '13 at 14:36
And here's another fiddle to show it's not just Angular! http://jsfiddle.net/AHTZH/ – Jonathan Rowny Oct 02 '13 at 14:41

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

According to the selected answer here:

AngularJs: How to check for changes in file input fields?

There is no, or limited, binding support for file. This means that trying to bind to file is likely going to make for problems.

edited May 23 '17 at 12:29

Community

1
1

answered Oct 02 '13 at 14:16

Fourth

9,163
1
23
28

Setting type="{{value}}" and value = file with angular?

2 Answers2