检查输入框是否为空并需要切换答案

【问题标题】：check if an input box is not empty and toggle required检查输入框是否为空并需要切换
【发布时间】：2016-09-29 20:36:01
【问题描述】：

根据第一个输入框的空或非空切换强制。用户可以输入一个值，也可以清除该值。

如果非空 -> 需要其他控件
如果为空 -> 其他控件不需要

用户在第一个输入框中输入值后，所需的控件应以红色边框突出显示。如果用户清除该值或输入框为空，则不应显示红色边框。

找到这个PLUNKER

如果您只能使用 Angular 属性来做到这一点，那就太好了。

HTML

  <div ng-controller="TimeController as vm">
    <form name="vm.timeForm" novalidate>
      <div class="form-group">
        <label>If you enter any value here below two fields becomes mandatory, 
        If I am empty below fields are not mandatory. </label>
        <input type="number" name="firstfield" class="form-control" 
        ng-model="vm.firstfield" required>
      </div>

      <div class="form-group">
        <label>Please select</label>
        <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()" ng-required="vm.firstfield">
          <option value="hours">HOURS</option>
          <option value="minutes">MINUTES</option>
          <option value="seconds">SECONDS</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine }">
        <label>Desired Time</label>
        <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue" ng-required="vm.firstfield">
        <p ng-show="vm.timeForm.desiredRPO.$invalid" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p>
      </div>
    </form>
  </div>

【问题讨论】：

嘿，你能解决你的问题吗？

标签： javascript html angularjs validation required

【解决方案1】：

如果vm.textbox有值就加ng-class那么简单，我只是修改了index.html，见下面代码：

如果您在此处输入任何值，则以下两个字段将成为必填项，如果我为空，则以下字段不是必填项。如果它们是强制性的，请确保用红色边框突出显示下面的控件。

    <h3>This above input control will play with our required property. </h3>

    <div class="form-group" ng-class="{'has-error': vm.firstfield && !vm.selectedOption}">
      <label>Please select</label>
      <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()" ng-required="vm.firstfield">
        <option value="hours">HOURS</option>
        <option value="minutes">MINUTES</option>
        <option value="seconds">SECONDS</option>
      </select>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine || vm.firstfield && !vm.desiredRPO}">
      <label>Desired Time</label>
      <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue" ng-required="vm.firstfield">
      <p ng-show="vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine || vm.firstfield && !vm.desiredRPO" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p>
    </div>
  </form>
</div>

Plunker 演示：https://plnkr.co/edit/HezGVYYvhewXTJ7Irro6?p=preview

【讨论】：

【解决方案2】：

ngRequired demo 显示了如何执行此操作。 ng-required 可以采用任何表达式，因此只需测试所需的输入即可。

<input type="text" ng-required="testCondition ()" />

查看更新的 plunk：https://plnkr.co/edit/7sFiBBX3wynPgcaDqisV?p=preview

【讨论】：

是的，我看到了，但它不会在无效字段中突出显示为红色。