2017-02-24 5 views
0

私はフォームを持っていて、写真をアップロードするための入力ファイルを含んでいます。私が望むのは、入力ファイルが値を持たないまでボタンを無効にすることです。私はまた、ボタンを無効にする他のバリデーションを持っています。入力ファイルが変更されるまで、ng-disabledボタン

私のhtmlファイルには、この

<form name="form" novalidate ng-submit="submitForm();"> 
    <input class="btn btn-primary" type="file" accept="image/*" name="File" id="File" style=" margin-left:5px; width: 100%;"> 
    <div class="form-group"> 
     <label class="text-left control-label">Categories: </label> 
     <select class="col-xs-5 pull-right" ng-model="cat" name="cat" ng-required="true" required> 
      <option value="">---Please select---</option> 
      <option ng-repeat="item in Cat" value="{{item.categories_id}}">{{item.categories_name}}</option> 
     </select> 
    </div> 
    <br/> 
    <div class="form-group"> 
     <label class="text-left control-label">Types: </label> 
     <select class="col-xs-5 pull-right" ng-model="type" name="type"> 
      <option value="">---Please select---</option> 
      <option ng-repeat="item in Types" value="{{item.type_id}}">{{item.type_name}}</option> 
     </select> 
    </div> 
    <br/> 
    <div class="form-group"> 
     <label class="text-leftcontrol-label">Gender: </label> 
     <select class="col-xs-5 pull-right" name="category" id="category" ng-model="gender"> 
      <option value="">---Please select---</option> 
      <option value="0">Female</option> 
      <option value="1">Male</option> 
      <option value="2">Both</option> 
     </select> 
    </div> 
    <br/> 
    <div class="form-group"> 
     <label class="text-left control-label">*Texture: </label> 
     <select class="col-xs-5 pull-right" ng-model="texture" name="texture" ng-required="true" required> 
      <option value="">---Please select---</option> 
      <option ng-repeat="item in Texture" value="{{item.textures_id}}">{{item.textures_name}}</option> 
     </select> 
    </div> 
    <br/> 
</div> 
<div class="col-xs-5"> 
    <div class="form-group"> 
     <label class="col-md-5 control-label">*Name: </label> 
     <div class="col-md-7"> 
      <input type="text" class="pull-right input-group inline form-control" ng-model="name" name="name" id="Name" ng-required="true" required> 
     </div> 
    </div> 
    <br/><br/><br/> 

</form> 

のようなもので、私のボタンがそれを行うには非常に簡単な方法です。この

<button name="submit" type="submit" id="submitsave" class="btn btn-primary" ng-disabled="form.texture.$invalid || form.cat.$invalid || form.type.$invalid " type="button" type="button" style="margin-right:1%; width:10%; height:10%">Finish</button>   
+0

http://stackoverflow.com/questions/29385861/angularjs-disable-submit-button-until-a-file-upload -path-selected – madhu

+3

[AngularJsはファイルアップロードパスが選択されるまで[送信ボタンを無効にする]の可能な複製です。(http://stackoverflow.com/questions/29385861/angularjs-disable-submit-button-until-a-file-upload-path選択された) –

答えて

0

のようなものです。これをチェックしてください。ビューで

-

<body ng-app="app" ng-controller="mainCtr"> 
    <form name="mainform"> 
     <input type="text" ng-model="name" required /> 
     <input type="submit" value="Save" ng-disabled="mainform.$invalid"></input> 
    </form> 
    </body> 

JS-で

angular.module('app',[]).controller('mainCtr',function($scope){ 

}); 
関連する問題