Search code examples
javascriptjqueryangularjsangular-validation

How to Enable/Disable html controls' validation in AngularJS


I have a radio button group. First one for "Inside Bangladesh" and Second one for "Outside Bangladesh". If i click "Inside Bangladesh" no validation required for Address field(textbox), but If i click "Outside Bangladesh" required validation for Address field will be triggered. see my below code:

<ng-form id="validateReg" name="validateReg">
  <div ng-class="{'has-error': validateReg.chkInside.$invalid}">  
     <label>
           <input type="radio" id="radioInsideBD" required value="1" ng-model="chkInside" name="chkInside" />
           Inside Bangladesh
     </label>
     <label>
           <input type="radio" id="radioOutsideBD" required value="1" ng-model="chkInside" name="chkInside" />
           Outside Bangladesh
     </label>
   </div>
   <div ng-class="{'has-error': validateReg.address.$invalid}"> 
        Address: <textarea type="text" class="form-control" ng-model="address" name="address" id="address"></textarea>
   </div>
</ng-form>

Solution

  •  <div ng-class="{'has-error': (addressRequired ? validateReg.address.$invalid : false)}"> 
            Address: <textarea type="text" class="form-control" ng-model="address" name="address" id="address"></textarea>
       </div>
    

    You should set/unset addressRequired based on radio button selected.

    If Inside Bangladesh selected set it to false or else true.