How to set text box value in angular 4 using typescript?

Question

How to set text box value in Angular 4 using TypeScript? I tried in this way but it doesn't work.

app.component.html

<form class="example-form">
  <mat-form-field class="example-full-width">
     <input matInput class='aaaa' placeholder="Favorite food" [(ngModel)]="form1" value="{{setTextBoxValue}}">
     </mat-form-field>
  <button (click)='clickMe()'>Click Me</button>
</form>

app.component.ts

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

export class AppComponent implements OnInit {
   title = 'app';
   clickMe() {
     setTextBoxValue: string = "new value";
   }
}

change your [(ngModel)] value make it to setTextBoxValue so that you can get you result or form1 : string ; this.form1 = "your value"; — Hrishikesh Kale
– Hrishikesh Kale, Commented Jan 5, 2018 at 13:49
try luck by adding <input type="text" matInput class='aaaa' placeholder="Favorite food" [(ngModel)]="form1" "> — Hrishikesh Kale
– Hrishikesh Kale, Commented Jan 5, 2018 at 14:03
Try using either [(ngModel)] or {{setTextBoxValue}}, if it works I would be interested to know why it works. — Ashish Ranjan
– Ashish Ranjan, Commented Jan 5, 2018 at 14:03

Milo · Accepted Answer · 2018-01-05 14:31:25Z

10

Remove value="{{setTextBoxValue}}" and just use [(ngModel)]. For example if you have private inputVar: string; in your component (.ts) then the element would look like:

<input matInput placeholder="Input" [(ngModel)]="inputVar">

In the component (.ts) you could have:

constructor() { this.inputVar = "initial value" }

And then a button with (click) event like you have:

<button type="button" (click)="changeInputVar()">Test Change</button>

And again in your .ts you have the changeInputVar() defined:

private changeInputVar(): void {
  this.inputVar = "changed";
}

Here is a demo.

answered Jan 5, 2018 at 14:31

Milo

3,4539 gold badges32 silver badges44 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-01-05 13:47:04Z

0

just set the model value inside the function,

this.fomr1 = "new value";

also make sure you have the form1 declared in your component,

form1 : string ;

answered Jan 5, 2018 at 13:47

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

JanithCW Over a year ago

I tried! But it doesn't work. But it gives no errors.

Collectives™ on Stack Overflow

How to set text box value in angular 4 using typescript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related