How to get input from textarea in html to .ts in Angular

Question

I am a newbie in Angular and now I want to get user input from a textarea but I fail to do so.

Updated: ng-model="num1" > [(ngModel)]="num1"

HTML:

<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>
     // user enter one number

<span><input type="text" readonly value={{answer}}></span></p>

<button class="result" (click)=onSelectEqual()>=</button>
     // click this button to get the value that user entered

.ts:

num1 : number;
answer: number;

onSelectEqual(){
  this.answer = this.num1 + 1 ;
}

Is it angular or angularJS? In angular you have to use [(ngModel)]="num1" — random
– random, Commented Feb 20, 2020 at 3:11
you are mixing angular and angularJS. The click event is called using angular syntax. In angularJS, it should be ng-click="onSelectEqual()" - docs.angularjs.org/api/ng/directive/ngClick. — random
– random, Commented Feb 20, 2020 at 3:28
A gentle reminder: AngularJS == versions 1.x; Angular == versions 2+. There is no such thing as AngularJS 8. — georgeawg
– georgeawg, Commented Feb 20, 2020 at 3:34

random · Accepted Answer · 2020-02-20 03:21:54Z

1

In angular, for two-way binding you have to enclose ngModel in [()]. See - https://angular.io/api/forms/NgModel.

<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>

answered Feb 20, 2020 at 3:21

random

7,9093 gold badges21 silver badges25 bronze badges

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

Comments

Akash Bhardwaj · Accepted Answer · 2020-02-20 03:43:20Z

0

Use [(ngModel)] instead of ng-model in your html template. ng-model is the syntax of Angularjs which will not work in Angular2+.

Also make sure to import FormsModule in app.module.ts

import { FormsModule } from '@angular/forms';

Also add it to the imports array in app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

This is important as without the FormsModule, angular will not be able to identify the ngModel directive.

On a different note, the input will return the value typed by the user as a string. To read it as a number and add 1 to it, you will have to typecast it:

onSelectEqual(){
  this.answer = Number(this.num1) + 1 ;
}

Please also note that // for comments doesn't work in html template, use  instead.

edited Feb 20, 2020 at 3:43

answered Feb 20, 2020 at 3:32

Akash Bhardwaj

3561 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to get input from textarea in html to .ts in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related