CODEWITHSUNDEEP
angulartypescriptscripting
Mokka soru
Mokka soru

Reputation: 513

I am not getting the textbox value in typescript angular7

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

Upvotes: 6

Views: 19414

Answers (3)

dardardardar
dardardardar

Reputation: 344

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);
  }
}

Upvotes: 1

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

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

Upvotes: 5

Julien Ambos
Julien Ambos

Reputation: 2088

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)
  }
}

Upvotes: 1

Related Questions