입력 상자가 비어 있지 않고 토글 필요 여부를 확인하십시오.

첫 번째 입력 상자의 비어 있거나 비어 있지 않은 토글을 토글하십시오. 사용자는 값을 입력하고 값을 지울 수도 있습니다. 빈 경우> 다른 제어 는 입력 상자가 비어 있지 않고 토글 필요 여부를 확인하십시오.

필수 - - 비공이 경우

> 기타 제어

필요하지 마자 사용자는 제 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>

출처

2016-09-29 ankitd

이봐, 당신이 당신의 문제를 해결할 수 있을까? – AlexP

vm.textbox에 값이 있으면 NG-클래스를 추가하는 것만 큼 간단

, 난 그냥 수정 index.html을 참조 아래 코드 :

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

업데이트 쿵하는 소리를 참조하십시오 여기에 임의의 값을 입력하면 두 필드가 필수 필드가됩니다. 필드가 비어있는 경우 필드 아래에 필수 항목이 아닙니다. 적색 테두리가있는 컨트롤 아래에서 필수 항목 인 경우 강조 표시하십시오.

<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

출처

2016-09-29 21:00:42 AlexP