Question

根据第一个输入框的空或非空来切换必需。用户可以输入值并清除该值。

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

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

找到这个PLUNKER

如果只能使用非常棒的Angular属性，

HTML

description

Answer 1

就像添加ng-class一样简单，如果vm.textbox有值，我只修改了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 DEMO：https://plnkr.co/edit/HezGVYYvhewXTJ7Irro6?p=preview

Answer 2

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

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

请参阅更新的plunk：https://plnkr.co/edit/7sFiBBX3wynPgcaDqisV?p=preview

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

2 个答案: