How to duplicate an input when checkbox is checked on Angularjs?

Question

I am trying to duplicate an input if a checkbox is checked. If it is not, then do not write anything on the second checkbox.

This is the code that references to those elements:

<form name="myCustomForm">
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="{{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"/>
    <input ng-model="ownerName" placeholder="Enter your name..." name="ownerName"  id="ownerName" disabled>
    <input ng-value="{{checkDuplicate.value1}}" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
</form>

On my controller I have the following to initialize the checkbox:

$scope.checkDuplicate = {
   value1 : true
};

What I am trying to do

If a checkbox is checked then the second input will be autocompleted with the value of the first one. If not, then the second input will be empty until the user gives to it some value.

I have two problems here:

First one

If I set manually true or false depending on the state of the checkbox (I mean ng-true-value="'true'" and ng-false-value="'false'") it retrieves well the value that the checkbox has.

But if I try to retrieve my input value as shown above I get an empty value (it does not matter if it has some value or not, it is always empty).

Second one

If I put my code as I have shown above it only gets the value first time (when the page is loaded), but not the following times I change the checkbox value.

Nevertheless, if I try to retrieve the value out of the input value I can get the value of the checkbox properly. I mean, if I do <span>{{checkDuplicate.value1}}</span> it is shown properly.

I have tried using ng-change but without success.

How can I solve these errors or how can I duplicate my input in a proper way when checkbox is checked?

Thanks in advance!

What is your concern? if the checkbox is checked then dynamically input should be added? — Rohan Kawade
– Rohan Kawade, Commented Jun 13, 2017 at 10:44
@RohanKawade No, I mean that if a checkbox is checked then the second input will be autocompleted with the value of the first one. If not, then the second input will be empty until the user gives to it some value. Now I will add this info to the question to be more clear. — Francisco Romero
– Francisco Romero, Commented Jun 13, 2017 at 10:47

Burak Akyıldız · Accepted Answer · 2017-06-13 11:39:49Z

1

You can change the variable to track input or not. There is a working example.

Explanation

I changed the checkboxes ng-true-value and ng-false-value it is giving us a variable name witch you are using in ng-model of ownerName input. Then i changed duplicate inputs ng-model variable. It is changing depeding on checkboxes value. If checkbox is checked it is tracking $scope.inputs.name if it is not $scope.inputs.text

    var app = angular.module("app",[]);
    app.controller("ctrl", function($scope){

    $scope.inputs = {};

    $scope.checkDuplicate = {
       value1 : 'text'
    };

    })

    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      </head>
      <body  ng-app="app" ng-controller="ctrl" >
      
      
      <form name="myCustomForm">
        <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="name" ng-false-value="text"/>
        <input ng-model="inputs.name" placeholder="Enter your name..." name="ownerName"  id="ownerName" >
        <input ng-model="inputs[checkDuplicate.value1]" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
    </form>


      </body>
    </html>

edited Jun 13, 2017 at 11:39

answered Jun 13, 2017 at 11:24

Burak Akyıldız

1,64216 silver badges26 bronze badges

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

4 Comments

Francisco Romero Over a year ago

So if I want to change an input value... Should I declare it on the $scope to be able to change?

Burak Akyıldız Over a year ago

You are already declaring it on scope. Just name it and use it by name to referance it

Burak Akyıldız Over a year ago

@Error404 i edited the answer to track input not its value

Francisco Romero Over a year ago

I mean that if I tried to set before the value manually (with true and false values) it did not change. The only one difference that I see is that you are creating this new variable called inputs.

himanshu · Accepted Answer · 2017-06-13 11:44:52Z

 <form name="myCustomForm">
  <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="
        {{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"
          ng-click="updateOwnerName()"/>
  <input ng-model="ownerName" placeholder="Enter your name..." 
         name="ownerName"  id="ownerName" disabled>
  <input ng-model="houseOwnerName" ng-value="{{checkDuplicate.value1}}" 
         placeholder="Enter the name of the house in which you live..." 
         name="houseOwnerName" required>

Add a click event to the checkbox.

Assign ng-model to the second input.

now in the controller

     $scope.checkDuplicate = {
          value1 : false   
      };

     $scope.updateOwnerName=function(){
         // write your auto complete logic here
         // let the value to be displayed in 2nd input is "MARS"
           if(checkDuplicate.value1){
                 $scope.houseOwnerName="MARS";
              }
           else{
                 $scope.houseOwnerName="";
               }

        }

Collectives™ on Stack Overflow

How to duplicate an input when checkbox is checked on Angularjs?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related