[Warning] *It looks like you're using the old forms module. This will be opt-in in the next RC

[hoangtrucit]

I install angular2-webpack-starter lastets, run command npm run server:dev:hmr and on my browser show warning " *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" sample picture below. How I fix this warning ? Thanks
http://i.imgur.com/1bD4L8B.png

[abdulhaq-e]

Look at the end of this document:

https://docs.google.com/document/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

[wannadream]

The document is quite long. I still see ngForm is used at last. Could anyone just list the changes? What should be used in RC2 and RC3...? And the official tutorial is not up-to-date, either.
https://angular.io/docs/ts/latest/guide/forms.html

[spock123]

@wannadream I am using the new forms module in my app - it works beautifully.

You really should spend an hour looking at the document - it might look "long", but that is because it describes both how forms work now - and how they work in the new module. It's much simpler and easy.

Right now it's opt-in. From next RC you will have to choose and at some point it will become the default forms module.

Again, imho, it's much better than what we've had so far.

[wannadream]

Will do.

[PatrickJS]

thanks, updated via aecb5ad

[lamari]

This is what you need @wannadream :
http://www.picnet.com.au/blogs/guido/post/2016/06/30/upgrading-to-angular-2-reactive-forms-rc3-new-forms/

[Apps-23]

I have been trying to use ng2-bootstrap pagination which requires me to correct the old forms module first:
So the steps I follow so as to fix this issue is:

In my app.module.ts

**import {disableDeprecatedForms, provideForms} from '@angular/forms';**


@NgModule({
    imports: [
        BrowserModule,
        FormsModule, // for template driven approach
        routing,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule, // for data-driven approach
        DndModule.forRoot()
    ],

    exports: [
        BrowserModule,
        DndModule
    ],

    declarations: [
        AppComponent,
        NavBarComponent,
        NavDecorateComponent,
        ContentComponent,
        LoginComponent,
        FooterComponent
    ],

    providers: [
        HTTP_PROVIDERS,
        TokenService,
        ProjectService,
        ValueService
    ],



 bootstrap: (AppComponent, [
   **disableDeprecatedForms(), // Disable old Forms API!
    provideForms()                // Use new Forms API!**

])
})
export class AppModule { }

Then while using it in the login component:

import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup} from '@angular/forms';

@Component({
    selector: 'login',
    templateUrl: 'app/templates/login.component.html',
    directives:[REACTIVE_FORM_DIRECTIVES]
})

While the HTML template(login.component.html) goes like this:

                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Login</label>
                        <input 
                        type="text"
                        class="form-control" 
                        id="exampleInputEmail3" 
                        placeholder="Enter email" 
                        #mail="ngModel"

                        [(ngModel)]="email"

                        required
                        >

                         <div 
                        *ngIf="mail.touched && mail.errors"
                        class="alert-danger">
                        Email address is required!
                         </div>
                    </div>

                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">Password</label>
                        <input 
                        type="password" 
                        class="form-control" 
                        id="exampleInputPassword3" 
                        placeholder="Password" 
                        #password="ngModel"

                        [(ngModel)]="pass"

                        required
                        >

                         <div 
                        *ngIf="password.touched && password.errors"
                        class="alert-danger">
                        Password is required!
                        </div>
                    </div>

But I am not able to bootstrap the application, it doesnt show any error in the console.
I have followed the following link to make changes in my application:
[(https://www.barbarianmeetscoding.com/blog/2016/07/15/updating-your-angular-2-app-to-use-the-new-forms-api-a-practical-guide/)]

[wannadream]

@Apps-23
The page you were visiting is out of date. You need to take another look at the official doc: https://angular.io/docs/ts/latest/guide/forms.html.
Form directive is deprecated, I think, which is replaced with FormModule.