1

I have inputs that build from objects in array.

Everything got right but when input.type = 'file', Angular change it to text type and i cant figure it out.

Did anything notice this?

My template:

<span ng-repeat="input in formInputs">
    <label for="{{input.id}}">{{input.label}}</label>
    <input type="{{input.type}}" id="{{input.id}}" name="{{input.name}}" ng-model="input.insert" ng-required="input.must">
</span>

My array:

var formInputs = [
    {
        label     : 'first name',
        id        : 'id1',
        type      : 'text',
        name      : 'name1',
        must      : true,
        insert    : ''
    },
    {
        label     : 'upload file',
        id        : 'id2',
        type      : 'file',
        name      : 'name2',
        must      : true,
        insert    : ''
    }
]

My result:

<span ng-repeat="input in formInputs">
  <label for="id1">first name</label>
  <input type="text" id="id1" name="name1" ng-model="input.insert" ng-required="input.must">
  <label for="id2">upload file</label>
  <input type="text" id="id2" name="name2" ng-model="input.insert" ng-required="input.must">
</span>

EDIT:

I have this flowing:

<input type="{{childInput.type}}" id="{{childInput.id}}" name="{{childInput.name}}">

And this array:

var formInputs = [
    {
        id        : 'id',
        type      : 'file',
        name      : 'name',
    }
]

The resolute [only in Safari]:

<input type="text" id="id" name="name">

Why its happening?

Thanks for your help!

Zeev Katz
  • 2,273
  • 2
  • 16
  • 42

1 Answers1

1

From the AngularJS Documentation for input:

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

So it looks like Angular falls back to type="text". There are a lot of answers which bring solutions to this, check out:

From that answer, here's a way to deal with a file input.

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

As mentionned by Hackerman, his jsfiddle seem to work (with Angular 1.0.1) at first sight, but it doesn't seem to populate the model correctly.

Community
  • 1
  • 1
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
  • I have a dynamic types in my objects, and all i need it my objects type insert into the input type in my template. Why its change "file" string to "text"? Sorry but i didn't get it. – Zeev Katz Oct 17 '16 at 21:08
  • @ZeevKatz Because `ng-model` doesn't support the file input, it looks like it falls back to a text input. – Emile Bergeron Oct 17 '16 at 21:24
  • ok, i remove ng-model from my input and its don't work. I'm edit my question. – Zeev Katz Oct 18 '16 at 05:40
  • its happen in safari only! – Zeev Katz Oct 18 '16 at 05:48
  • @ZeevKatz You can't use `ng-model` with `type="file"`, even if it don't fallback to type text, the file input is a special case. – Emile Bergeron Oct 18 '16 at 14:38
  • I'm understand what you saying but i have another problem, safari change file type to text type from file type (without ng-model). File type showing only if i write it manually, and if i take it from the type value in my object its change to text type (only with angular and safari). You know this problem? – Zeev Katz Oct 18 '16 at 14:51
  • 1
    @ZeevKatz Oh sorry for the misunderstanding, I've just seen the edit in your question. I do not have Safari, so testing this will be hard and I won't be able to easily help further. – Emile Bergeron Oct 18 '16 at 15:10
  • @ZeevKatz You could test if the problem arises with vanilla JS (or with jQuery) and if it's the case, ask a new question specific to the file input type being dynamically set while using Safari – Emile Bergeron Oct 18 '16 at 15:11