CODEWITHSUNDEEP
javascriptangular
Hamza L.
Hamza L.

Reputation: 1823

Angular 2 - ngModel does not work inside <form> after updating to rc4

I've just done an update to RC4; however, many things stopped working, the below was working fine. Now, ngModel does not work inside unless you remove one of them.

page.js

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

page.html

   <form (ngSubmit)="submitForm()">
        <ion-list radio-group  [(ngModel)]="content" name="ionListGroup">
        </ion-list>
   </form>

When I click to open page.html, nothing happens, but I see:

  *It looks like you're using the old forms module. This will be opt-in in the next RC, and
  will eventually be removed in favor of the new forms module. For more information, see:
  https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

I've done some debugging and I've seen that if I remove [(ngModel)]="content" or <form> tag everything work fine again, but I can't remove any of them because I need them both.

Upvotes: 4

Views: 1759

Answers (2)

Anirban Bhadra
Anirban Bhadra

Reputation: 259

1. Include form module to NgModule in the app.module.ts file

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

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

2. Don't forget to give a name to the input element

    <input mdInput type="text" [(ngModel)]="username" placeholder="User Name" name="first" required>

Upvotes: 3

Siraj
Siraj

Reputation: 687

From the docs mentioned in the error message. You need the following step

import {disableDeprecatedForms, provideForms} from '@angular/forms';
bootstrap(AppComponent, [
    disableDeprecatedForms()
    provideForms()
])

Upvotes: 0

Related Questions