How to display button when all input field has some value using Angular.js

Question

i need one help.I need to display my button while all input has some value using Angular.js.Let me to explain my code below.

 <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Product Name :</span>
    <select class="form-control"  id="pro_name" ng-model="pro_name"  ng-change="removeBorder('pro_name');" ng-readonly="periodread" >
<option value="">Select Product</option>
<option value="1">Britania</option>
<option value="0">Soap/option>
</select>
    </div>
    <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Cost Price :</span>
    <input type="text" name="discount" id="ucp" class="form-control" placeholder="Add unit cost price" ng-model="unit_cost_price" ng-keypress="clearField('ucp');" ng-readonly="isChecked=='false'">
    </div>
    <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Sale Price :</span>
    <input type="text" name="discount" id="usp" class="form-control" placeholder="Add unit sale price" ng-model="unit_sale_price" ng-keypress="clearField('usp');" ng-readonly="isChecked=='false'">
    </div>
    <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Quantity :</span>
    <input type="text" name="discount" id="quantity" class="form-control" placeholder="Add quantity" ng-model="quantity" ng-keypress="clearField('quantity');">
    </div>
    <div class="input-group bmargindiv1 col-md-12" ng-show="displayRadio">
    <input type="radio" name="favoriteColors" ng-model="isChecked" value="true">Add new stock
    <input type="radio" name="favoriteColors" ng-model="isChecked" value="false">Update stock 
    </div>
    <input type="button" class="btn btn-success" ng-click="addProductstockData(billdata);"  id="addProfileData" ng-value="buttonName" ng-show="showAddButton"/>

In the code i need when all field has some value the button will display to user.User can also type/select the value in input field and for some cases values are also appending inside input field bu another button click.So here i need when user has any value inside the input fields then only button will display to user.Please help me.

Answer 1

Here`s the working plunker ! of your code.

All you need to do is wrap up the inputs in the <form name="theForm" novalidate></form> and give required attribute to inputs and show the button only once the required fields has some value in it, like <button ng-show="theForm.$valid"></button> . Hope that helps

Answer 2

 var app = angular.module('form-example', []); app.directive('passwordValidate', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined); scope.pwdHasLetter = (viewValue && /[Az]/.test(viewValue)) ? 'valid' : undefined; scope.pwdHasNumber = (viewValue && /\\d/.test(viewValue)) ? 'valid' : undefined; if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) { ctrl.$setValidity('pwd', true); return viewValue; } else { ctrl.$setValidity('pwd', false); return undefined; } }); } }; }); 

 .input-help { display: none; position:absolute; z-index: 100; top: -6px; left: 160px; width:200px; padding:10px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #aaa; border:1px solid #ddd; opacity: 0.9; } .input-help::before { content: "\\25C0"; position: absolute; top:10px; left:-12px; font-size:16px; line-height:16px; color:#ddd; text-shadow:none; } .input-help h4 { margin:0; padding:0; font-weight: normal; font-size: 1.1em; } /* Always hide the input help when it's pristine */ input.ng-pristine + .input-help { display: none; } /* Hide the invalid box while the input has focus */ .ng-invalid:focus + .input-help { display: none; } /* Show a blue border while an input has focus, make sure it overrides everything else */ /* Overriding Twitter Bootstrap cuz I don't agree we need to alarm the user while they're typing */ input:focus { color: black !important; border-color: rgba(82, 168, 236, 0.8) !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important; } /* Show green border when stuff has been typed in, and its valid */ .ng-dirty.ng-valid { border-color:#3a7d34; } /* Show red border when stuff has been typed in, but its invalid */ .ng-dirty.ng-invalid { border-color:#ec3f41; } /* Show the help box once it has focus */ .immediate-help:focus + .input-help { display: block; } /* Immediate help should be red when pristine */ .immediate-help.ng-pristine:focus + .input-help { border-color:#ec3f41; } .immediate-help.ng-pristine:focus + .input-help::before { color:#ec3f41; } /* Help hould be green when input is valid */ .ng-valid + .input-help { border-color:#3a7d34; } .ng-valid + .input-help::before { color:#3a7d34; } /* Help should show and be red when invalid */ .ng-invalid + .input-help { display: block; border-color: #ec3f41; } .ng-invalid + .input-help::before { color: #ec3f41; } /* Style input help requirement bullets */ .input-help ul { list-style: none; margin: 10px 0 0 0; } /* Default each bullet to be invalid with a red cross and text */ .input-help li { padding-left: 22px; line-height: 24px; color:#ec3f41; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA1CAYAAABIkmvkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wOS8xMlhq+BkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAEA0lEQVRIie2WW2jbVRzHv//zT5rkn0ub61zaNdEiPqTC9EFRhtgJk63qg3Wr0806pswNiYgDUXxwyryCEB8UBevtaSCCDHQoboKyoVvVzfRmL2napU0mrdbl8s//dy4+dM1M28n64FsPnIdz+XzO75zfOXA0pRRWU7o/uS9FxOc+3/vlIQBgq4F3fHxvKuIPJ9cFwi9uTXU8BwDa1Uaw/aN7UusCkWRbPI5yxcTI2Bgy49kXrkrwwIedqYg/nGyLXwsJiYHBYWTGs7Cq5Kpt4cA3PXft+2rX40vhrt7OVLgplIzHYuBKoH9gCKMjGVE1LdfJl86YDAAOfN2ziZP4NODyv9/z2fanFuH7P9iWCjcFk/FYK4QSGLgEk0WeUy/3mQCgPXFs9xbBRW883NrssDvQN3hWcOLPEPGWiD94MBaPQymBoaERjI9mBSfu+fHwL+biItpjR3e6JFfloDeAaGQ9SpUycvlp6ExHJBKGYsDvgyMYH81KTsL90yuX4VoWdh3pMqSQpWBjAC3RZkgpYEkCFDA8NIqJ0UlFxI3Tr/5aB9elsau305BcloKBAFpjLeBSYGRwDBNjk4oTN06/dnYZXCcAgK1vbzYkl6VwOATihOzYlOLEjTOvn1sRXiYAgDsP32YIKUuWaXFOwtP3xrnqleAVBQBwy/M3GZy4+PnN3/4TvqJgNWVVj2lNsCZYE6wJ1gRrgv9dYAMAHHw2Bl2fUEpBVavtLPVW/78nVR/Zk4CupzVHA6zChSOK0yHv0S8GFyK4BMPhAJxOgLE03/9kYhE2dz+agKaldY8bDaEQ7D5ft7Roy+UIlCooy5LQdaZ5vVBEgGmmrT172yVxaIylmdcDm9cHc2oK1Zm8kETvLAo0pRRk8mmnEqKouVw68zVCzP8F/uccFHHoXi/sjT6Y53Mw83mhOHn8J7416wQAwPftd0ouiswwdJu/CRASkBKQAmYuBzNfWIC/O173W6llwfbeu6Yi8tDsrAQJYGICyGQAIWDO5KUkaxlcJwAASdSmaWAQHCACOAc4h6YzJi1qWymNNUHlwYcT0JDWXQbACYhGgeh6gHM4Ghuh2/R0YePNiaUCTSmFcvdDCY1paZvhht3nQ2VmGmahICSR5vQHmDt6DcozeZSnp2FdLLZHhwdq94SVd+xMaJqWtrkM2L1uVHILpy0t8igidymXExfHMzBCQbhCIdga7Onz8etqkdgkUYTZbYCSqORmULlQEIq4J3jyexMA8jdu9BRzuaKyLN3udkNjDEqICID+2hbm797Wwez24/T3vJTE3aFTP9Sd9vT1NziVEMUGr1c35+Y2b5jKnqgNKqWglMLspjs6/rj1dudie2mdao07J5s3dCzt/werJTyI1yYqpQAAAABJRU5ErkJggg==) no-repeat 2px -34px; } /* Set to green check and text when valid */ .input-help li.valid { color:#3a7d34; background-position: 2px 6px; } /* Set submit button */ form .btn, form.ng-valid .btn[disabled] { display: none; } form.ng-invalid .btn[disabled], form.ng-valid .btn { display: inline-block; } body { padding: 20px 0; } input { width: 166px } .form-horizontal .control-label { width: 100px; } .form-horizontal .controls { position: relative; margin-left: 120px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form ng-app="form-example" class="row form-horizontal" novalidate> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required> <div class="input-help"> <h4>Invalid Email</h4> </div> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input ng-model="password" class="immediate-help" password-validate required type="password" id="inputPassword" placeholder="Password"> <div class="input-help"> <h4>Password must meet the following requirements:</h4> <ul> <li ng-class="pwdHasLetter">At least <strong>one letter</strong></li> <li ng-class="pwdHasNumber">At least <strong>one number</strong></li> <li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li> </ul> </div> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn">Create Account</button> <button class="btn" disabled>Create Account</button> </div> </div> </form>