Bootstrap - 在下拉列表中选择更改时，使文本控件成为必需的

Question

我的表单中有一个 select 控件和一个文本控件。当 selection 发生变化时（当用户 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>

默认情况下 "option A" 将被 selected，当用户 selects "Option B" 时，我希望我的文本控件成为强制性的。打开表格时这不是强制性的

非常感谢任何帮助

Answer 1

我会在您的 select 框中使用 ng-change 来设置一个 $scope 属性来切换文本字段中 ng-required 的值。

select框：

<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

Bootstrap - 在下拉列表中选择更改时，使文本控件成为必需的

Bootstrap - On selection change in dropdown, make the text control mandatory

twitter-bootstrap

angularjs

angular-ui-bootstrap

twitter-bootstrap-3