Bootstrap - при изменении выбора в раскрывающемся списке сделайте текстовое управление обязательным

У меня есть элемент управления select и текстовый элемент управления в моей форме. Когда происходит изменение выбора (когда пользователь выбирает определенное значение), я хочу, чтобы текстовый элемент управления был обязательным. Этот текстовый элемент управления не должен быть обязательным при открытии формы. Это возможно?

Использую bootstrap 3 и AngularJS. И я новичок в обоих.

вот мой код:

<div class="form-group">
    <label class="col-sm-2 control-label">Select an Option</label>
    <div class="col-sm-4">
        <select class="form-control" name="type">
            <option value="A">Option A</option>
            <option value="B">Option B</option>
        </select>
    </div>
    <div class="col-sm-4">
        <input type="text" class="form-control" name="text" id="text" ng-model="text" >
        <span class="help-block" style="color:red" ng-show="myform.text.$dirty && myform.text.$invalid">
            <span ng-show="myform.text.$error.required">Required, when Option B is selected</span>
        </span>
    </div>
</div>

По умолчанию будет выбран «вариант A», когда пользователь выбирает «вариант B», я хочу, чтобы мой текстовый элемент управления стал обязательным. Это не будет обязательным при открытии формы

Любая помощь высоко ценится


angularjs twitter-bootstrap twitter-bootstrap-3 angular-ui-bootstrap
person Jack Clouseau    schedule 21.05.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я бы использовал ng-change в вашем поле выбора, чтобы установить свойство $scope, которое будет переключать значение ng-required в вашем текстовом поле.

Поле выбора:

<select class="form-control" name="type" ng-model="optionValue" ng-change="setRequired()">
              <option value="A">Option A</option>
              <option value="B">Option B</option>
            </select>

Текстовое поле:

<input type="text" class="form-control" name="text" id="text" ng-model="text" ng-required="textRequired" />

Контроллер:

function mainController($scope) {
      $scope.optionValue = 'A';
      $scope.textRequired = false;
      $scope.setRequired = function() {
          if($scope.optionValue==='B') {
              $scope.textRequired= true;
          }
          else {
              $scope.textRequired = false;
          }
      }
  }

http://plnkr.co/edit/lyMgKIEJukpgnA31hnTz?p=preview

person Kmart2k1    schedule 21.05.2015