I am not getting the textbox value in typescript angular7

Question

I'm using angular7. Just make some textbox and then alert that textbox value. But I can't get the values in typescript. Please help me guys how to proceed more this step.

about.component.html

<input type="text" name="username">
<button (click)="lgbtnclick()" type="button" name="button"></button>

about.component.ts

  import { Component, OnInit } from '@angular/core';
  @Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
  })

  export class AboutComponent implements OnInit {
   name : string;

   constructor() { }

   ngOnInit() {
   }

   lgbtnclick(){
      alert(this.name)
      console.log(Error)
   }
}

alert message:

undefined

use ngmodel to bind textbox value to name varible .name is undefined it's not initialized — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Feb 23, 2019 at 13:07
Try: <input type="text" name="username" [(ngModel)]="name"> — Prashant Pimpale
– Prashant Pimpale, Commented Feb 23, 2019 at 13:08

Prashant Pimpale · Accepted Answer · 2019-02-23 13:21:56Z

5

Set default value to "" for name property and use [(ngModel)]="name" for input type

HTML Code:

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Enter name" [(ngModel)]="name" >
  </mat-form-field>

  <button (click)="lgbtnclick()" type="button" name="button">Test</button>

TS Code:

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

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  name: string="";

  constructor() { }

  ngOnInit() {
  }

  lgbtnclick() {
    alert(this.name)
    console.log(Error)
  }
}

Stackblitz

edited Feb 23, 2019 at 13:21

answered Feb 23, 2019 at 13:14

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

14 Comments

Mokka soru Over a year ago

Its showing console log ƒ Error() { [native code] }

Prashant Pimpale Over a year ago

Remove this:console.log(Error)

Prashant Pimpale Over a year ago

Without typing anything its always return empty string

Mokka soru Over a year ago

I'm using your code what you enter in dev live server. that same code in my page

Prashant Pimpale Over a year ago

Just forked it and share the link

|

Julien Ambos · Accepted Answer · 2019-02-23 13:19:20Z

1

Angulars data binding differs from jQuery or plain JavaScript and won't work using the "name" attribute of the input element. Please refer to either Reactive Forms or Template driven Forms.

In your example, the template driven form could be applied. Angular works by binding the value of an input to that of an instance variable of the hosting class with [(ngModel)]="name". Though it is discouraged to do it, the [ and ( refer to a property AND event binding (two-way data binding). Find out more about it here.

To use the ngModel directive, you need to include the FormsModule in your respective module.

The HTML code:

<input matInput placeholder="Enter name" [(ngModel)]="name" >
<button (click)="lgbtnclick()" type="button" name="button"></button>

The Typescript code:

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

@Component({
  selector: 'app-about',
  styleUrls: ['about.component.css'],
  templateUrl: 'about.component.html',
})
export class AboutComponent {
  name: string="";

  constructor() { }

  lgbtnclick() {
    alert(this.name)
    console.log(Error)
  }
}

answered Feb 23, 2019 at 13:19

Julien Ambos

2,10817 silver badges30 bronze badges

4 Comments

Mokka soru Over a year ago

This is also showing like this ƒ Error() { [native code] }

Julien Ambos Over a year ago

Please remove this line console.log(Error) and post the complete console output if there are any errors.

Mokka soru Over a year ago

Can I know why its showing like this issue ** ƒ Error() { [native code] }** ?

Julien Ambos Over a year ago

Because Error in console.log(Error) apparently evaluates ** ƒ Error() { [native code] }**

dardardardar · Accepted Answer · 2019-02-23 14:01:37Z

1

Hi the name attribute in your html code doesn't actually bind to your typescript file. It's just an attribute on the HTMLElement. If you want that value there are actually a lot of options. The simplest solution here is just attach the name variable to the value attribute of the input or good'ol ngModel (make sure to import ReactiveFormsModule and FormsModule in your AppModule)

Value Solution

html

<input type="text" name="username" [value]="name">
<button (click)="lgbtnclick()" type="button" name="button"></button>

ts

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
  name: string;
  constructor() {}

  ngOnInit() {}

  lgbtnclick() {
    alert(this.name);
    console.log(Error);
  }
}

ngModel Solution

html

<input type="text" name="username" [(ngModel)]="name">
<button (click)="lgbtnclick()" type="button" name="button"></button>

ts

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
  name: string;
  constructor() {}

  ngOnInit() {}

  lgbtnclick() {
    alert(this.name);
    console.log(Error);
  }
}

answered Feb 23, 2019 at 14:01

dardardardar

3441 silver badge13 bronze badges

4 Comments

Mokka soru Over a year ago

Now also display empty

dardardardar Over a year ago

what method did you use? ngModel or the value?

Mokka soru Over a year ago

I'm not using method only this two lines in html file.

Mokka soru Over a year ago

Guys still i'm facing same issue.

Collectives™ on Stack Overflow

I am not getting the textbox value in typescript angular7

3 Answers 3

14 Comments

4 Comments

Value Solution

html

ts

ngModel Solution

html

ts

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

4 Comments

Value Solution

html

ts

ngModel Solution

html

ts

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related