0

I am trying to use Angular to update all input values that have a certain class if another input is NOT checked.

HTML:

        <input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset()"> My Legal Business Name and/or Legal Business Address are different.
        <section class="form-show" ng-show="user.diffPhysicalLegal">
            <input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name" ng-required="user.diffPhysicalLegal == true"></br>
            <input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address" ng-required="user.diffPhysicalLegal == true"></br>
            <input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code" ng-required="user.diffPhysicalLegal == true">
        </section>

Here's the function I tried writing:

app.js

$scope.inputReset = function(){
    if(!$('.form-optional').is(':checked') {
      $(this).parent().find('.optional-element').val(null);
    }
}

This doesn't work, and I haven't been able to figure out how else to accomplish this. I'm new to Angular so I'm still pretty unfamiliar with how to implement jQuery into my app.js file, or if I even need jQuery to accomplish this.

user3183717
  • 4,427
  • 6
  • 20
  • 42

1 Answers1

0

In ng-change function context this refers to $scope object but not to DOM element. If you want to stick to DOM manipulation by a certain class you could consider the following changes:

1) pass section element container identifier (e.g. class name)

ng-change="inputReset('section.form-show')"

2) select and reset input element values like this:

$scope.inputReset = function (contanerId) {
  if(!$scope.user.diffPhysicalLegal){         
     $(contanerId).find('input.optional-element').val(null); //not recommended: DOM manipulation
  }
}

Demo

angular.module('sampleApp', [])

  .controller('sampleCntrl', function ($scope) {


    $scope.inputReset = function (contaner_id) {
      if(!$scope.user.diffPhysicalLegal){         
         $(contaner_id).find('input.optional-element').val(null); //not recommended: DOM manipulation
      }
    }

  });
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="sampleApp" ng-controller="sampleCntrl">

  <input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset('section.form-show')">  My Legal Business Name and/or Legal Business Address are different.
  <section class="form-show" ng-show="user.diffPhysicalLegal">
   <input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name"
    ng-required="user.diffPhysicalLegal == true"></br>
   <input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address"
    ng-required="user.diffPhysicalLegal == true"></br>
   <input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code"
    ng-required="user.diffPhysicalLegal == true">
  </section>

 </div>

The following example demonstrates an alternative way on how to reset input elements values without a direct DOM manipulation

angular.module('sampleApp', [])

  .controller('sampleCntrl', function ($scope) {


    $scope.inputReset = function () {
      if(!$scope.user.diffPhysicalLegal){         
         $scope.user.legalName = "";
         $scope.user.legalMailingAddress = "";
         $scope.user.legalCityStateZip = "";
      }
    }

  });
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCntrl">

  <input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset()">  My Legal Business Name and/or Legal Business Address are different.
  <section class="form-show" ng-show="user.diffPhysicalLegal">
   <input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name"
    ng-required="user.diffPhysicalLegal == true"></br>
   <input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address"
    ng-required="user.diffPhysicalLegal == true"></br>
   <input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code"
    ng-required="user.diffPhysicalLegal == true">
  </section>

 </div>
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • Thanks! Your second code snippet is actually similar to what I had before, but the final application will have more than three conditional inputs, which is why I was hoping to target by class so that my script doesn't have to be super long. Why is DOM manipulation not recommended in Angular? – user3183717 Oct 22 '16 at 19:56
  • If you refer to my comment, I forgot to include the phrase _Dom manipulation from controller_ The reason why you shouldn't do DOM manipulation in the controller is because the intent of the controller is to deal only with the state of the app. Follow [this comprehensive answer](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) for a more details – Vadim Gremyachev Oct 22 '16 at 21:59