CODEWITHSUNDEEP
htmlangularforms
Kota
Kota

Reputation: 157

Angular ngModel is not binding to data

Why does two way binding not work?? I am importing the forms module and using the banana syntax. I've also tried reactive forms and that did not work either. It's not populating the input field with the pre-defined value or updating it when the user interacts with this field.

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AppRoutingModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})

general.component.ts

  user = {
    firstName: 'john',
  }

general.component.html

  <form>
      <label for="firstName">First Name</label>
      <input
        type="text"
        class="form-control"
        name="firstName"
        id="firstName"
        [(ngModel)]="user.firstName"
      />
  </form>

Upvotes: 0

Views: 532

Answers (1)

shlop
shlop

Reputation: 76

As i see from your app.module.ts, your general.component.ts does not belong to this module. (in declarations only app.component.ts)

Find module, where you have declarated GeneralComponent, and import there forms module

@NgModule({
  declarations: [..., GeneralComponent],
  imports: [..., FormsModule]

Upvotes: 1

Related Questions