Атрибуты проверки AngularJS не работают должным образом для файла типа ввода - PullRequest
Новая
       11

Атрибуты проверки AngularJS не работают должным образом для файла типа ввода

0 голосов
/ 11 февраля 2019

У нас есть следующая форма 

<form name="createForm" class="form-horizontal overlayContainer" enctype="multipart/form-data" ng-submit="submitResourceForm()">

... [ removed for brevity ]

    <div class="form-group">
        <label for="file" class="col-md-2 control-label">Select file</label>
        <div class="col-md-10">
            <label class="btn btn-default" ng-class="{'btn-primary': Data.File}">
                Browse <input type="file" name="file" style="display: none;" em-file-model="Data.File" accept="image/*|application/octet-stream" required />
            </label>
            <span ng-show="Data.File">
                {{Data.File.size}} bytes
            </span>
            <span ng-show="createForm.file.$touched && createForm.file.$invalid" class="validation">File is required.</span>
        </div>
    </div>

    <div class="form-group">
        <label for="name" class="col-md-2 control-label">Name</label>
        <div class="col-md-10">
            <input type="text" name="name" class="form-control" ng-model="Data.Name" required>
            <span ng-show="createForm.name.$touched && createForm.name.$invalid" class="validation">Name is required.</span>
        </div>
    </div>

</div>

Проверка работает при отправке - форма не будет отправлена ​​без файла и имени - но проблема в сообщении проверки для файланикогда не отображается.

Пара любопытных наблюдений

  • Я добавил в контроллер фиктивную функцию для отладки и прикрепил ее к ng-щелчку на кнопке ОК.С помощью точки останова (Visual Studio) в функции я попытался проверить различные свойства проверки как createForm.file, так и createForm.name - все свойства - $ valid, $ touchched и т. Д. - показывались как неопределенные.

  • Я поместил некоторую разметку в форму, чтобы показать значения createForm.file. $ Touch, createForm.file. $ Invalid, createForm.name. $ Touch и createForm.name. $ Invalid.Свойства имени отображаются с определенными значениями, но свойства файла - нет.

  • Я пытался использовать! CreateForm.file. $ Pristine вместо createForm.file. $, Но ничего не изменилось.

Обратите внимание, em-файл - это наша собственная директива для добавления фактического файла в модель.Я удалил его, чтобы посмотреть, мешало ли оно в этом случае, и это не имело никакого значения.

...