Как отобразить кнопку, когда все поля ввода имеют какое-либо значение, используя Angular.js

Question

Как отобразить кнопку, когда все поля ввода имеют какое-либо значение, используя Angular.js

0

Мне нужна одна помощь. Мне нужно отобразить мою кнопку, пока все входные данные имеют некоторое значение, используя Angular.js.Позвольте мне объяснить мой код ниже.

 <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"/>

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

satya 31 дек. 2015, в 06:08

Источник

0

Вы должны держать все свои поля внутри формы и показывать свою кнопку, как только ваша форма будет действительной.
Ved 31 дек. 2015, в 05:01
1

От просмотра @Saeed ответ ниже. Я хочу добавить перспективу пользовательского интерфейса; Я бы выделил кнопку немного серым цветом, отключил бы щелчок и предложил бы заполнить поля, если они попытаются нажать кнопку.
TheBlackBenzKid 31 дек. 2015, в 05:26

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

Вы должны держать все свои поля внутри формы и показывать свою кнопку, как только ваша форма будет действительной.
От просмотра @Saeed ответ ниже. Я хочу добавить перспективу пользовательского интерфейса; Я бы выделил кнопку немного серым цветом, отключил бы щелчок и предложил бы заполнить поля, если они попытаются нажать кнопку.

Suresh B · Answer 1 · 2015-12-31T04-31-00.000Z

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 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>

Saidbek Arislonov · Answer 2 · 2015-12-31T02-58-00.000Z

1

Вот рабочий плункер ! вашего кода.

Все, что вам нужно сделать, это обернуть входы в <form name="theForm" novalidate></form> и предоставить required атрибут входам и показать кнопку только после того, как требуемые поля имеют некоторое значение, например <button ng-show="theForm.$valid"></button>. надеюсь, это поможет

Saidbek Arislonov 31 дек. 2015, в 02:58

0

@ Saeed: поле выбора все еще пусто, и кнопка идет.
satya 31 дек. 2015, в 05:30
0

Да, это верно, но это потому, что вы не предоставили js-файл или данные, которые были в вашем js-файле, но как только вы это сделаете, вы можете добавить тот же required атрибут в этот тег выбора. ура
Saidbek Arislonov 31 дек. 2015, в 05:34
0

Но мы можем проверить здесь, используя любые статические данные .. верно?
satya 31 дек. 2015, в 05:35
0

Если бы вы могли просто вставить данные списка продуктов здесь, я мог бы помочь. Извините за плункер, хотя, я просто изменил плункер, который был сделан другим человеком, слишком ленив, чтобы создать новый.
Saidbek Arislonov 31 дек. 2015, в 05:39
0

Я отредактировал мой пост, снова проверь мой код.
satya 31 дек. 2015, в 05:43
0

plnkr.co/edit/kwjU5IjarHqKdLeKvE3R?p=preview, так что вот обновленный плункер. Если вы хотите, чтобы тег select был обязательным, я не думаю, что для этого можно использовать обычный html, вам нужно определить ваши параметры в js. Проверьте плункер
Saidbek Arislonov 31 дек. 2015, в 05:51
0

Давайте продолжим эту дискуссию в чате .
satya 31 дек. 2015, в 05:52

Показать ещё 5 комментариев