ankitdadhich ankitdadhich - 2 months ago 6
AngularJS Question

check if an input box is not empty and toggle required

Toggle mandatory based on empty or nonempty of the first input box. The user may enter a value and also clear the value.


  • If nonempty -> Other control are required

  • If empty -> Other control are not required



As soon as the user enters a value in the first input box, the required controls should be highlighted with a red colored border. If the user clears the value or the input box is empty those red border should not be shown.

Find this PLUNKER

If you can do this only with Angular properties that would be great.

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

As simple as adding ng-class if vm.textbox has a value, I just modified index.html, see code below:

If you enter any value here below two fields becomes mandatory, If I am empty below fields are not mandatory. Make sure to highlight below control with red border if they are mandatory.


    <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