AngularJs Отключить кнопку отправки до тех пор, пока не будет выбран путь отправки файла

Question

Я новичок в AngularJS, и я могу найти решение моей проблемы. У меня есть поле для загрузки файлов на моем сайте и кнопка отправки. На этой странице выпадающий список и отключенная кнопка отправки, когда пользователь впервые нажимает на страницу. Кнопка отправки разрешается только после выбора из выпадающего списка. Это отлично работает, но теперь мне было предложено добавить параметр загрузки файла в список, который я сделал, и поле для загрузки файла <input type="file"> отображается, когда оно выбрано.

Проблема заключается в том, что когда пользователь выбирает параметр загрузки, он включает мою кнопку, и я хочу, чтобы кнопка отправки была включена после выбора пути к файлу.

В настоящее время включение/отключение кнопки выполняется в моем представлении, как показано ниже.

  <div class="form-group"> 
       <div class="col-sm-8"> 
        <select name="selectedbankaccountname" ng-options="choice for choice in bankaccountnames" ng-model="selectedbankaccountname" class="form-control" style="width:100% !important" focus-on="setfocus" required> 
         <option></option> 
        </select> 
       </div> 
       <!-- TODO - BUTTON NEEDS TO BE DISABLED IF BANK UPLOAD SELECTED & FILE NOT SELECTED --> 
       <button type="submit" class="btn btn-success" ng-disabled="startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" ng-click="startrec()" title="Click to start the auto reconciliation procedure.">Start Auto Rec</button> 
      </div> 
      <div class="form-group" ng-if="bankreconciliation.reconciliationtype == 'Bank file upload'"> 
       <div class="col-sm-12"> 
        <p>Please ensure that you have copied the selected file to the designated folder prior to uploading the bank file.</p> 
        <input type="file" style="width: 100%; height: 35px; border: none !important; cursor: pointer" onchange="angular.element(this).scope().file_changed(this)" ng-model="bankfilepath" /> 
       </div> 
      </div> 

Может ли кто-нибудь пролить свет на то, как я могу получить эту работу.

Answer 1

В вашей кнопки отправки, ng-disabled атрибут

ng-disabled="!bankfilepath || startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" 

проверка bankfilepath, а также.

Таким образом, кнопка будет включена только в том случае, если файл выбран. Первоначально значение bankfilepath не определено, и как только пользователь выбрал файл, он будет иметь путь к файлу.