檢查輸入框是否爲空且需要切換

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