Bind object to input field Angular

Question

I want to bind a Company object from my component to my view. This was easy in AngularJS, but I get an error when I do this in Angular 2.

View

<input type="text" class="form-control" [(ngModel)]="company.name" 
    placeholder="Company Name" required>
<input type="text" class="form-control" [(ngModel)]="company.address1" 
    placeholder="Address Line 1" id="address1" required>
<button class="btn btn-primary pull-right next-btn" (click)="show()">Next</button>

Component:

company: Company;

constructor(
  private router: Router
 ) { }

ngOnInit() { }

show() {
  console.log(this.company);
}

error:

TypeError: Cannot read property 'name' of undefined

This should work , its correct any error have you imported the Forms Module for ngModule — Rahul Singh
– Rahul Singh, Commented Nov 6, 2017 at 12:50
When you ask for help with an error, always post the error. You wouldn't call a doctor and say "something is wrong. tell me how to get better" and expect her to be able to help ;-) — BeetleJuice
– BeetleJuice, Commented Nov 6, 2017 at 12:56
@RahulSingh I did not import the NgForm module, which solved the problem — Mario Dennis
– Mario Dennis, Commented Nov 6, 2017 at 15:35

kemsky · Accepted Answer · 2017-11-06 12:59:06Z

1

If you are using ngModel out of the form then you must set options to [ngModelOptions]="{standalone: true}", if you have from, then you must set name attribute for each control.

answered Nov 6, 2017 at 12:59

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

Comments

Vasanth Senthamarai Kannan · Accepted Answer · 2017-11-07 01:05:41Z

You are trying with Template Driven forms, If you are interested on Reactive Form please see the below site
https://toddmotto.com/angular-2-forms-reactive

Good luck!

You can use the below code for your (Template Driven Form) reference.

<code>
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
      <div>Username:        <input type="text"     name="username" ngModel></div>
      <div>SSN:             <input type="text"     name="ssn"      ngModel></div>
      <div>Password:        <input type="password" name="password" ngModel></div>
      <div>Confirm password: <input type="password" name="pconfirm"  ngModel></div>
      <button type="submit">Submit</button>
    </form>
  `
})
class AppComponent {
  onSubmit(formData) {
    console.log(formData);
  }
}

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

platformBrowserDynamic().bootstrapModule(AppModule);
</code>

Mario Dennis · Accepted Answer · 2017-11-09 15:15:30Z

1

As @Rahul said I had to import NgForm from the @angular/forms module for it to work

edited Nov 9, 2017 at 15:15

answered Nov 7, 2017 at 0:49

Mario Dennis

3,04613 gold badges38 silver badges50 bronze badges

Comments

William · Accepted Answer · 2021-06-18 13:31:41Z

0

answered Jun 18, 2021 at 13:31

William

5596 silver badges9 bronze badges

Collectives™ on Stack Overflow

Bind object to input field Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related