CODEWITHSUNDEEP
angulartypescript
user5740953
user5740953

Reputation: 179

Angular 6 data binding issues

I have just moved form Angular JS 1.6 to Angular 6, while creating a app in Angular 6 [(ngModel)]="number1" directive is used for 2 way data binding. As soon as it is used my component stops rendering and if i use (ngModel) the component renders but model variable binds no data. If i add this code in my component TS code public number1: number = 22;, the value is never data binded. My version of typescript is 2.9 and it does takes this code let we = "Hello" and throws an error "Unexpected Token." Does Angular creates variables just like Angular JS, like we only write a variable in HTML binded with ng-Model, that variable also gets added to $scope object, does the same happen in Angular 6.

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

 @Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.scss']
 })

 export class CalculatorComponent {

  //var foo = 'Hello TypeScript!';
  public number1: number = 22;
  public number2: number = 22;
  public result: number;

  public add() {
    alert(this.number1);
    alert(this.number2);
    this.result = this.number1 + this.number2;
    }

  }


<div class="container">
    <div class="header">
        <h2>
            Calculator component
        </h2> 
    </div>

    <div class="grid">
        <div class="row">
            <div class="col-6">
                <div class="operation">
                    <div class="row">
                        <div class="col-12">
                            <input  type="number"  placeholder="number" [(ngModel)]="number1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <input   type="number" placeholder="number" [(ngModel)]="number2">
                        </div>
                    </div>
                    <div>
                        <div class="col-12">
                            <button class="button" (click)="add()">
                                Add 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="result">
                    <span>
                        Result : {{result}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Views: 9005

Answers (3)

Debojyoti
Debojyoti

Reputation: 4841

Are you importing FormsModule in your app.module.ts?

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

@NgModule({
  ...
  imports:[ ..., FormsModule ]
  ...
})

Important : For ngModel in multiple input fields

Also when you are using more than 1 input element with ngModel, you have to use [ngModelOptions]="{standalone: true}"

So for your example it will be like

<div class="container">
    <div class="header">
        <h2>
            Calculator component
        </h2> 
    </div>

    <div class="grid">
        <div class="row">
            <div class="col-6">
                <div class="operation">
                    <div class="row">
                        <div class="col-12">
                            <input  type="number"  placeholder="number" [(ngModel)]="number1" [ngModelOptions]="{standalone: true}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <input   type="number" placeholder="number" [(ngModel)]="number2" [ngModelOptions]="{standalone: true}">
                        </div>
                    </div>
                    <div>
                        <div class="col-12">
                            <button class="button" (click)="add()">
                                Add 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="result">
                    <span>
                        Result : {{result}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Working example : stackblitz

Upvotes: 4

Hasiya
Hasiya

Reputation: 1458

Try below steps,

1.Import '@angular/forms' inside your app.module.

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

  1. Add 'FormsModule' into @NgModule Export Array in app.module
  @NgModule({
  declarations: [..
  ],
  imports: [
    FormsModule
  ],
})

Upvotes: 0

Damian Lascarez
Damian Lascarez

Reputation: 11

When you use ngModel, you need to include name attribute on your controls.

Upvotes: -1

Related Questions