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.

you should keep all your feilds inside a form and the show your button once your form is valid. — Ved
– Ved, Commented Dec 31, 2015 at 5:01
From viewing @Saeed answer below. I want to add a UI perspective; I would have the button slightly grayed out and make the click disabled and prompt them to fill fields if they try to click the button. — TheBlackBenzKid
– TheBlackBenzKid, Commented Dec 31, 2015 at 5:26

Saidbek Arislonov · Accepted Answer · 2015-12-31 05:23:48Z

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

answered Dec 31, 2015 at 5:23

Saidbek Arislonov

565 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

satya Over a year ago

@ Saeed : Still selection field is blank and button is coming.

Saidbek Arislonov Over a year ago

Yes, thats right, but that's because you didn't provide any js file or data that you had in your js file, but once you have that, you can put the same required attribute to that select tag. Cheers

satya Over a year ago

But we can test here taking any static data..right?

Saidbek Arislonov Over a year ago

if u can just paste the listOfProduct data here I could`ve help out. Sorry for the plunker though, I just changed the plunker that was made by a different person, was too lazy to create a new one.

Saidbek Arislonov Over a year ago

plnkr.co/edit/kwjU5IjarHqKdLeKvE3R?p=preview so here is the updated plunker. If you want the select tag to be required, I don't think it's possible to use plain html for that, u need define your options in your js. Check out the plunker

|

Suresh B · Accepted Answer · 2015-12-31 06:03:08Z

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 && /[A-z]/.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>

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related