Assign one textfield value to another based on checkbox click with angular.js

Question

I have two input field. I wanted to assign my first textfield value to second textfield value based on checkbox click event. So in my html the checkbox "Show me Password" click will display entered password by user in textfield one to my second textfield.

My html looks something like below.

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel.value" /></span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly" >
</div>

Sarjan Desai · Accepted Answer · 2015-10-09 12:16:31Z

2

Use ng-click function on checkbox and bind value to second input box if checkbox is selected so when user click on checkbox, value of first checkbox bind to second input and on unchecked second input set to empty string.

Keep in mind that value is copy from first input to second so when user click on checkbox so when password is visible and user change the input, value will not update.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showPassword = '';
  $scope.password = '';
  $scope.checkboxModel = false;
  $scope.showHidePassword = function(checkboxModel) {
    $scope.showPassword = checkboxModel ? '' : $scope.password;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
    <input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password">
  </div>
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel" ng-click="showHidePassword(checkboxModel)" /></span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="showPassword" readonly="readonly">
  </div>
</div>

answered Oct 9, 2015 at 12:16

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

satya Over a year ago

@ Sarjan : in my code it is working in reverse way .when checked not showing but not checked its showing.

Sarjan Desai Over a year ago

Then interchange value of ' ' and $scope.password in function..then it will work fine

sch · Accepted Answer · 2015-10-09 12:25:57Z

<input type="checkbox" ng-model="checkboxModel.value2"
       ng-true-value="password" ng-false-value="''">

<input ng-model="checkboxModel.value2" type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly">

Something like this maybe?

When you check the checkbox the value of that box will become the value of 'password', and the value of the second input field is equals to the value of that checkbox, hence the second input field is equals to the first field when checkbox is checked.. I think :)

It seems like you cannot set the 'true value' to a dynamic value, so my solution would not work, but you can use ng-change (when value is changed run a function)

        <input type="checkbox" ng-model="checkboxModel.value2" ng-change="showPassword()"
           ng-true-value="'true'" ng-false-value="'false'">

    <input ng-model="passwordValue" type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly">

in controller

    $scope.showPassword = function(){
    $scope.passwordValue = 'valueFromFieldOne';
    console.log('yep');
};

This function should run when you check the checkbox, and set the password field to the first input value (my code is not complete, but I think you get the picture)

J-D · Accepted Answer · 2015-10-09 12:38:01Z

0

Use angularjs copy in this way. Your checkbox will be something like below.

<input type="checkbox" ng-model="checkboxModel.value" ng-click="ShowMePass(password) /></span>

Your angularjs function.

$scope.ShowMePass= function(password) {
       $scope.passwordCopy= angular.copy(password);
     };

And finally you can use passwordCopy to be shown at your second textfield.

Working codepen.

Codepen

edited Oct 9, 2015 at 12:38

answered Oct 9, 2015 at 12:12

J-D

1,5751 gold badge11 silver badges23 bronze badges

1 Comment

satya Over a year ago

@ J-D : No,its not happening.

Alex Pogiba · Accepted Answer · 2015-10-09 12:39:35Z

Short and working example:

<div ng-app="myApp" ng-controller="myCtrl">
              <div class="input-group bmargindiv1 col-md-12">
                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
                <input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" >
            </div>
            <div class="input-group bmargindiv1 col-md-12">
                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel" ng-click="showPasswordQuick(password)"/></span></span>
                <input type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly" ng-model="passwordCopy">
            </div>

Then paste this into your JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showPasswordQuick = function(password) {
        $scope.checkboxModel ? $scope.passwordCopy = angular.copy(password) : $scope.passwordCopy = '';
    };
});

Collectives™ on Stack Overflow

Assign one textfield value to another based on checkbox click with angular.js

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related