ngModel kills output with white screen

Issue

I’m new to Angular 2 and trying to follow along with a Pluralsight course that uses it. It has me doing two way binding via [(ngModel)]=”book.title”, but when I put in the following in my book-form.component.html:

  <div class="form-group row">
    <label class="col-2 col-form-label">Title</label>
    <div class="col-10">
      <input class="form-control" type="text" name="title" [(ngModel)]="book.title">
    </div>
  </div>

I only get a white screen when I try to browse to the app. The variable is declared correctly in the book-form.component.ts file, and I can do this without a problem:

  <div class="form-group row">
    <label class="col-2 col-form-label">Title</label>
    <div class="col-10">
      <input class="form-control" type="text" name="title" value="{{book.title}}">
    </div>
  </div>

So, I’m not sure what I’m doing wrong in the first example of two-way binding that seems to match the video, but am not doing wrong in the second example of one way variable output.

It’s not giving me any errors to work with; just displaying a white screen when I try to hit the app in my browser. ‘ng serve’ output shows everything compiled successfully.

Solution

You need to import FormsModule in your module

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

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

Answered By – ferhado

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.