Two Way Data Binding - Angular 2

Question

Im trying to make two way data binding with ngModel and it not working. FormsModule is included. here the code:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.component.ts:

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  person = {
    name: 'David',
    age: '17'
  };

  constructor() { }

  ngOnInit() {
  }

}

test.component.html:

<form>
  <input type="text" [(ngModel)]="person.name" />
  <input type="text" [(ngModel)]="person.age" />
</form>

{{person.name}}<br />
{{person.age}}

Why it's not working?

Thanks.

Any errors in your console? You must add the name to your inputs as kemsky suggested — Ali Baig
– Ali Baig, Commented Jan 21, 2017 at 22:05

kemsky · Accepted Answer · 2017-01-21 22:02:22Z

1

You must add name attribute to inputs.

answered Jan 21, 2017 at 22:02

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2017-01-22 13:11:41Z

0

Other way is to add

[ngModelOptions]="{standalone: true}"

he understands he is no part of the form.

edited Jan 22, 2017 at 13:11

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered Jan 22, 2017 at 7:05

Daniel Dancziger

2442 silver badges6 bronze badges

Collectives™ on Stack Overflow

Two Way Data Binding - Angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related