CODEWITHSUNDEEP
angularjs
Himmators
Himmators

Reputation: 15036

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

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>

Upvotes: 0

Views: 603

Answers (2)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

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.

Upvotes: 1

Fourth
Fourth

Reputation: 9351

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.

Upvotes: 0

Related Questions