入力ボックスが空ではなく、トグルが必要かどうかを確認します。

Question

最初の入力ボックスの空または非空に基づいて、必須のトグルを切り替えます。ユーザーは値を入力して値をクリアすることもできます。

• 空でない場合 - 空の場合
• をを必要としている>他の制御 - >他の制御は、とすぐに、ユーザは、第1の入力ボックスに値を入力として

を必要としません必要なコントロールを赤色の枠線で強調表示する必要があります。ユーザーが値をクリアするか、入力ボックスが空白の場合、赤い枠線は表示されません。

あなただけ素晴らしいことだ角度のプロパティでこれを行うことができる場合、このPLUNKER

を探します。

<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>