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

Question

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

• 如果非空 - >其他控制都需要
• 如果空 - >其他控制都不需要

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

找到这个PLUNKER

如果你能做到这一点只角特性将是巨大的。

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> 

Answer 1

由于作为加纳克级，如果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()" /> 

见更新普拉克：https://plnkr.co/edit/7sFiBBX3wynPgcaDqisV?p=preview