Beta 10: forms module deprecated?

I just upgraded to Beta 10 and am getting this notice in my console. Is this expected? Anything I need to do to prepare for the “new” forms module?

*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 think its about the angular form (@angular/forms)m now thats use angular rc.3.

Updated guides for the new Angular2 RC3 forms can be found here:


and

For the curious, full Angular2 RC3 changelog is here:

EDIT: It seems like the official angular2 documentation got updated to RC3 forms as well
https://angular.io/docs/ts/latest/guide/forms.html

Thanks but I’m still confused - it says I’m using the “old forms module” and it will be removed in favor of “the new forms module”. How do I use the “new forms module”? The forms module is from angular/common.

import {FormBuilder, Validators} from '@angular/common';

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

1 Like

You also need to call provideForms() and disableDeprecatedForms() during bootstrap. There should be a URL in the message you’re quoting that explains all this.

1 Like

…and if you use model-driven forms, add the REACTIVE_FORM_DIRECTIVES to your components directive decorator setting and use [formGroup] instead of [ngFormModel] and formControlName instead of ngControl.

For more detailed/explained examples, see the offical angular2 form-guide or blog posts I linked above, should be readable in 5-10 minutes. :wink:

PS: Keep in mind to update dependencies to "@angular/core": "2.0.0-rc.3", [...] and add "@angular/forms": "0.1.1". (at the time of this writing)

2 Likes

Thanks for the info everyone, will parse all that and hopefully be up to date with it soon

Can somebody tell me how I can add the @angular/forms module to beta 10?

I would try adding this line to your package json. Then install it with npm. That’s how I would start.
"@angular/forms": “0.1.1”

npm install --save @angular/forms@0.1.1 did it for me. This added it to the node_modules folder and to the package.json dependencies file.

Update: it’s a bug of ionic. Waiting for beta11 release.

Have you tried new form in ionic beta10 ?

I have an error with ion components (ion-input, ion-select, etc.)
ORIGINAL EXCEPTION: No value accessor for 'iHaveCash’
But with native html inputs all work fine.

I initialize new form in my bootstrap file

ionicBootstrap(MyApp, [
        disableDeprecatedForms(),
        provideForms(),
        provide(TranslateLoader, {
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'build/assets/i18n', '.json'),
            deps: [Http]
        })],
    {/*config placed here*/});

I include all stuff into my component

import {Component, OnInit, forwardRef} from '@angular/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';
import {REACTIVE_FORM_DIRECTIVES, FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
    directives: [REACTIVE_FORM_DIRECTIVES],
    templateUrl: 'build/components/main/calculator/calculator.html',
    pipes: [TranslatePipe]
})

export class CalculatorPage implements OnInit {
    public calcForm: FormGroup;

    ngOnInit(): Promise<any> {
        this.calcForm = this.formBuilder.group({
            iHaveCash: ['someCashStartValue', Validators.required],
            iHaveCash2: ['someCashStartValue', Validators.required]
        });
    }

    constructor(
        private formBuilder: FormBuilder
    ) { }
}

And in template

<ion-content>
    <form [formGroup]="calcForm" class="calculator-form">
            <ion-item>
<!--STANDARD INPUT WORK FINE-->
                <input type="text" formControlName="iHaveCash">
               
<!--ION INPUT THROW AN ERROR-->
                <ion-input formControlName="iHaveCash2"
                           type="text"
                           placeholder="165.60"
                           required>
                </ion-input>
            </ion-item>
        </div>
        <div class="decorative-transition"></div>
        <div class="i-want">
            <ion-item>
                <ion-input required>
                </ion-input>
            </ion-item>

         <button block
                class="new-transfer-button"
                type="button"
                (click)="newTransfer(')">
             <span>{{'CALCULATOR.FORM.BUTTON.NEW_TRANSFER' | translate}}</span>
        </button>
    </form>
</ion-content>

1 Like

@snikh Did you try adding “ngDefaultControl” to your elements (ion-select, ion-input)?

1 Like

It works for me with ngDefaultControl, but the ion-select does not work anymore, the controller does not change the value

<ion-select>
ngDefaultControl
formControlName=“role”
(ionChange)=“roleChange($event)”>
<ion-option value=“standart”>Standart </ion-option>
<ion-option value=“admin”>Admin </ion-option>
</ion-select>

Did you found a solution for the ion-select?

Nope I think this is a bug from the beta 10 :stuck_out_tongue:

@DidelotK

It should work in beta.11 also you have syntax error on first line