beck24
June 28, 2016, 2:29am
1
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:
Forms Upcoming Change Proposal
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:
<a name="6.0.0-beta.0"></a>
# [6.0.0-beta.0](https://github.com/angular/angular/compare/5.2.0...6.0.0-beta.0) (2018-01-17)
### Bug Fixes
* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
* **benchpress:** should still support selenium_webdriver < 3.6.0 ([#21477](https://github.com/angular/angular/issues/21477)) ([9b84a32](https://github.com/angular/angular/commit/9b84a32))
* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([05208b8](https://github.com/angular/angular/commit/05208b8)), closes [#21491](https://github.com/angular/angular/issues/21491)
* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([e3e2fc0](https://github.com/angular/angular/commit/e3e2fc0))
* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([e64b1e9](https://github.com/angular/angular/commit/e64b1e9))
* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([7e3f9a4](https://github.com/angular/angular/commit/7e3f9a4)), closes [#20921](https://github.com/angular/angular/issues/20921)
* **ivy:** Add workaround for AJD in google3 ([#21488](https://github.com/angular/angular/issues/21488)) ([6af3672](https://github.com/angular/angular/commit/6af3672))
* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([43e1520](https://github.com/angular/angular/commit/43e1520)), closes [#19405](https://github.com/angular/angular/issues/19405)
* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([3951098](https://github.com/angular/angular/commit/3951098))
### Features
* **bazel:** allow ng_module rules to control whether type checking is enabled ([#21460](https://github.com/angular/angular/issues/21460)) ([cffa0fe](https://github.com/angular/angular/commit/cffa0fe))
This file has been truncated. show original
EDIT: It seems like the official angular2 documentation got updated to RC3 forms as well
https://angular.io/docs/ts/latest/guide/forms.html
beck24
June 28, 2016, 4:06pm
4
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';
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.
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
beck24
June 29, 2016, 6:24am
8
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.
snikh
June 30, 2016, 10:03am
12
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
inabhi9
September 14, 2016, 5:17am
17
@DidelotK
It should work in beta.11 also you have syntax error on first line