Develop Reference

Disable the button based on control validation which inside ng-repeat angularjs

plunkr link
https://plnkr.co/edit/vuktW1bWSNIoV43Qp8DC?p=preview
<form name="myForm">
<div ng-repeat ="ndc in NDCarray">
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<label>Number:
<input type="number" ng-model="ndc.value"
min="0" max="99" name="{{'input_'+$index}}" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.number">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt><br/>
<tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
<tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
<div style="padding-top:20px; display:block">
<span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span>
<span>Cancel </span>
<span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
</div>
</div>
</div>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<button>Save</button>
</form>
we can enter the value in number and click add, it will create new textbox with same option (delete,cancel,add). That textbox has some validation
Required
Min and Max range
If i create 4 text-boxes dynamically by clicking add and changing the value of any textbox causes validation failed means , i want to disable the save button which is outside of ng-repeat.
if any textbox failed in validation need to disable the save button.

Can you try the following:
<button ng-disabled="!myForm.$valid">Save</button>
As far as I understand your question this is what you are trying to achieve?

Can not get the validation message when wrong file is uploaded using Angular.js ng-file-upload

I have an issue while trying to implement ng-file-upload of Angular.js and my problem is i am not getting any validation message while uploading wrong file.My explaining my code below.
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div class="input-group bmargindiv1 col-md-12" ng-show="status==1">
<div ng-class="{ 'myError': billdata.bannerimage.$touched && billdata.bannerimage.$invalid }">
<div class="image-upload text-center">
<label for="imagefile1">
<img ng-src="{{attchImage1}}" style="cursor:pointer;width:auto; height:160px; border:1px #666 solid"/>
</label>
<input type="file" data-size="lg" name="bannerimage" id="imagefile1" ng-model="file" ngf-pattern="image/*" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width:100, height:100}" custom-on-change="uploadFile" ngf-select="onFileSelect($file);" >
<div class="input-group bmargindiv1 col-md-12">
<label for="imagefile1" >
<span style="color:#00F; font-style:italic; cursor:pointer"> Click here to upload Image </span>
<input type="hidden" name="someData" ng-model="imageData" />
</label>
</div>
</div>
</div>
</div>
<div class="help-block" ng-messages="billdata.bannerimage.$error" ng-if="billdata.bannerimage.$touched">
<p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
<p ng-message="minHeight" style="color:#F00;">Minimum height should be 100px</p>
</div>
</form>
Here when i am uploading the wrong file size(i.e-min-height<100px) the validation error message should display but its not coming at all.Please help me to resolve this issue.

How to display image when image will get selected using Angular.js

I need one help.I want to display image inside image tag when image will be selected.I am explaining my code below.
<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<img ng-src="{{attachImage}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>
My controller file is given below.
var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
$scope.submitImage=function(){
console.log('image',$scope.file);
}
});
Here my requirement is when user will select the image it will display inside the image tag which is given in my code using Angular.js.Please help me.

Bootstrap validation states with file upload

I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>

jasny bootstrap file upload not showing file name in the input div after submit

I am using jasny bootstrap file upload with ajaxupload.js.
http://jasny.github.io/bootstrap/javascript.html#fileupload
I used following code. When I click on select file it is showing it in the input div.
But when I click submit and then try to select element it is not showing the name in the input div
Here's a fiddle: http://jsfiddle.net/Ffkj6/
<form method="post" id="uploadform" enctype="multipart/form-data">
<div id="upload-adm" class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3" style="height:20px;">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="file" id="file"/>
</span>
Remove
<input type="submit" name="submit" value="Upload" class="btn adm-file-btn">
</div>
</div>
</form>