Angular/Ionic: Can't access value in html input field

Question

I have the following HTML code:

        <div class="list">
            <label class="item item-input">
                <input id="email" ng-model="email" type="text" placeholder="Email Address">
            </label>
            <br> 
            <center>
            <button class="button button-positive" ng-click="getData();"> Test </button>
             </center>
        </div>

And the following Angular code:

    $scope.getData = function() {
        var emailadd = document.getElementById('email');
        var url = "http://172.16.99.138/sendemail.php?emailaddress="+emailadd;
        console.log(url);
    };

However when I try to run the code, the console says that it can't find the variable. Would appreciate guidance here.

Don't use the dom elements for bindings like this, that's the main point of using angular, 2-way-binding.. — Pogrindis
– Pogrindis, Commented Jun 9, 2016 at 15:25
Still a bit confused as to how I should solve this. New to angular here... — user1650487
– user1650487, Commented Jun 9, 2016 at 15:26

Pogrindis · Accepted Answer · 2016-06-09 15:54:54Z

2

Note: Your code in question is wrong anyway as document.getElementById('email') will get you the dom element, this is not the value() of the element.

Still you should be doing this the "Angular Way" :

You need to define the model in your Controller like so :

  $scope.email = {
    text: ''
  };

Then you can bind in the HTML like so :

<input type="email" name="input" ng-model="email.text" required>

Then you can use the $scope.email in your method :

$scope.getData = function() {
   var url = "http://172.16.99.138/sendemail.php?emailaddress="+$scope.email.text;
   console.log(url);
};

ng-model Documentation

edited Jun 9, 2016 at 15:54

answered Jun 9, 2016 at 15:24

Pogrindis

8,3365 gold badges34 silver badges44 bronze badges

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

6 Comments

Fation Hadri Over a year ago

It is not necessary i think, to create object only to catch that input value.Angular it is more useful and beautiful :)

Pogrindis Over a year ago

@FationHadri assume the user would like to store the observable elsewhere, or infact he has complex objects, or he has resolved the value elsewhere in a service, he must then manage more on the front-view end. It's usualy good practice to maintain less in the view. But your answer works perfectly too for the OP's issue.

Fation Hadri Over a year ago

@Pogrindis, Yes, i agree with you,but here we have a simple situation and it doesn't make sense to me that object created in controller.I think it is not right.He don't want to have a static email.It is input.You do not limit the user what he should write in email.Sorry but i think you have made a big mistake here.

Pogrindis Over a year ago

@FationHadri big mistake would be a little over-exaggerated, but I have removed the static email for brevity. -> To help explain - in your example, how would you populate the fields from the database on arrival for example ? -> If you do not have #scope.email defined in controller.. It will not be too useful.

Fation Hadri Over a year ago

@Pogrindis, If we disscuss on what he might have to do,we ,will find a lot.I specified" big mistake" based on your reputation :)

|

Fation Hadri · Accepted Answer · 2016-06-09 15:28:58Z

1

Use this way of data binding in AngularJs,pass email as parameter in function getData()

<div class="list">
            <label class="item item-input">
                <input id="email" ng-model="email" type="text" placeholder="Email Address">
            </label>
            <br> 
            <center>
            <button class="button button-positive" ng-click="getData(email);"> Test </button>
             </center>
        </div>

And in your controller

  $scope.getData = function(email) {
       // var emailadd = document.getElementById('email');don't use this
        var url = "http://172.16.99.138/sendemail.php?emailaddress="+email;
        console.log(url);
    };

answered Jun 9, 2016 at 15:28

Fation Hadri

1502 gold badges2 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular/Ionic: Can't access value in html input field

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related