Angular : Fetch value of textbox onclick of button

Question

I want to print the value of textbox when i click of button. But it throws nullpointerexception. I also need to keep some value in the textbox i dont understand why?. Whatever i type in textbox and when i click on buttom i need to print the value of textbox What is the issue?

Below is my code:

ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.component.html',
  styleUrls: ['./mypage.component.scss']
})
export class mypageComponent implements OnInit {

  constructor(private router: Router) {

  }

  ngOnInit() {
  }



  myFunc() {

      var num1 = ((document.getElementById("exchageRateDate") as HTMLInputElement).value);
      console.log(num1);
  }

}

HTML File

<br>Welcome.<br>
Place - <input type="text" value="Sydney" ng-model="placeId" />
<button (click)="myFunc(placeId)" formtarget="_blank">Test</button>

Error:

ERROR TypeError: Cannot read property 'value' of null

Usually manipulating the dom directly in Angular application is discouraged. I would use a template variable to reference the input and pass the value directly to myFunc. — Adrian Fâciu
– Adrian Fâciu, Commented Jul 13, 2018 at 9:58

Saurabh Agrawal · Accepted Answer · 2018-07-13 10:25:24Z

12

Seems like you forgot to add id in input field

<input id="exchageRateDate" type="text" value="Sydney" ng-model="placeId" />

Edit: Angular way to do it

As you are using Angular so I will suggest you a better way to do this using NgModel

Try this

<br>Welcome.<br>
Place - <input type="text" value="Sydney" [(ngModel)]="placeId" />
<button (click)="myFunc(placeId)" formtarget="_blank">Test</button>

In component:

myFunc(num1) {
  console.log(num1);//here you will get input value through ng-model
}

edited Jul 13, 2018 at 10:25

answered Jul 13, 2018 at 9:52

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

Comments

Saurabh Agrawal · Accepted Answer · 2020-01-09 02:33:31Z

3

You need to set id of input tag remove ng-model because it's a angularjs(1.x.x) not angular(2/4/5/6/7/8)

In html

<br>Welcome.<br>
 Place - <input id="exchageRateDate" type="text" value="Sydney"  />
 <button (click)="myFunc()" formtarget="_blank">Test</button>

In typescript:

myFunc() {
    var num1 = ((document.getElementById("exchageRateDate") as HTMLInputElement).value);
    console.log(num1);
}

Here is working example: Get value of input tag using HTMLInputElement

edited Jan 9, 2020 at 2:33

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

answered Jul 13, 2018 at 10:01

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

2 Comments

Xonshiz Over a year ago

Why do you want to use "document.getElementById()" here when we can use a binding that would keep things sane.

Xonshiz Over a year ago

It would be better to use a "ViewChild" instead. It's much more closed to "Angular" approach. Check the answer HERE.

Rajat Jain · Accepted Answer · 2019-09-02 09:58:45Z

0

<input type="text" class="textbox" id="Summary" name="Summary"placeholder="Summary" value="{{Item.summary}}">
(document.getElementById("Summary") as HTMLInputElement).value;

answered Sep 2, 2019 at 9:58

Rajat Jain

1341 silver badge6 bronze badges

1 Comment

WhatsThePoint Over a year ago

Code only answers arent encouraged as they dont provide much information for future readers please provide some explanation to what you have written

Collectives™ on Stack Overflow

Angular : Fetch value of textbox onclick of button

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related