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

Activity

1. abdulhaq-e commented on Jun 17, 2016

   

   abdulhaq-e

   on Jun 17, 2016

   Contributor

   More actions

   Look at the end of this document:

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

   👍React with 👍1Reacted by Rafal Baumann
2. wannadream commented on Jun 17, 2016

   

   wannadream

   on Jun 17, 2016

   Last edited by wannadream

   More actions

   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
3. spock123 commented on Jun 17, 2016

   

   spock123

   on Jun 17, 2016

   More actions

   @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.
4. wannadream commented on Jun 17, 2016

   

   wannadream

   on Jun 17, 2016

   More actions

   Will do.
5. PatrickJS commented on Jun 19, 2016

   

   PatrickJS

   on Jun 19, 2016

   Owner

   More actions

   thanks, updated via aecb5ad
6. PatrickJS

   closed this as completedon Jun 19, 2016
7. lamari commented on Jul 25, 2016

   

   lamari

   on Jul 25, 2016

   More actions

   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/
8. Apps-23 commented on Oct 6, 2016

   

   Apps-23

   on Oct 6, 2016

   Last edited by Apps-23

   More actions

   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/)]
9. wannadream commented on Oct 7, 2016

   

   wannadream

   on Oct 7, 2016

   More actions

   @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.