shmu80
August 7, 2016, 10:37am
1
After upgrade to Beta 11, all my angular 2 form is not working.
Below is my code:
javascript:
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
.......
constructor(nav, fb, params) {
this.nav = nav;
this.myform= fb.group({
fieldone: ['', Validators.required],
fieldtwo: ['', Validators.required]
});
HTML:
<ion-content padding class="myclass">
<form [ngFormModel]="myform">
<ion-item>
<ion-label stacked>field1</ion-label>
<ion-input type="number" ngControl="fieldone">
</ion-input>
</ion-item>
<ion-item>
<ion-label stacked>field2</ion-label>
<ion-input type="number" ngControl="fieldtwo">
</ion-input>
</ion-item>
I understand Angular 2 has change the Forms behavior, but I can’t find any document to upgrade or change the code to.
May I know anybody can advise?
2 Likes
Change ngFormModel
to formGroup
and ngControl
to formControl
2 Likes
shmu80
August 7, 2016, 2:44pm
3
joshmorony:
formControl
Anything else I need to change to. Ather I replace ngFormModel to formGroup and ngControl to formControl, I have the below issue
2 931892 group EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/findclcriteria/findclcriteria.html:27:75
ORIGINAL EXCEPTION: TypeError: Assignment to read-only properties is not allowed in strict mode
ORIGINAL STACKTRACE:
TypeError: Assignment to read-only properties is not allowed in strict mode
at setUpControl (http://localhost:8100/build/js/app.bundle.js:41126:5)
at FormControlDirective.prototype.ngOnChanges (http://localhost:8100/build/js/app.bundle.js:40430:13)
at _View_FindclcriteriaPage0.prototype.detectChangesInternal (Function code:919:29)
at AppView.prototype.detectChanges (http://localhost:8100/build/js/app.bundle.js:33798:9)
shmu80
August 7, 2016, 3:12pm
4
I fixed my issue by replacing ngFormModel to formGroup and ngControl to formControlName.
3 Likes
[disabled]="!authForm.valid"
should still work fine. Could you please post your form setup here?
joshmorony:
formControl
Thanks Joshmorony. I had the same issue and your recommendation solve it!
shmu80:
formControlName
I confirm above to be working for beta36 (11). But… is this all we have to do?
https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub
offers more it seems, but for me unclear what of the proposed routes to go down. Help by Ionic Team would be fine.
rdddddd
January 18, 2017, 4:47am
10
IT DID NOT WORKED FOR ME MY CODE IS ASS FOLLOWS
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" [(ngModel)]="email" ngControl="email" ></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Telephone</ion-label>
<ion-input type="number" [(ngModel)]="phoneNo" ngControl="phone" ></ion-input>
</ion-item>
</form>
IN TS
import {FormBuilder, Validators} from ‘@angular /forms’;
import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from ‘@angular /forms’;
@Component ({
directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})
constructor(public _form: FormBuilder){
this.registrationForm = this.form.group({
“email”:["",Validators.compose([Validators.required, Validators.pattern(’[a-z0-9. %±]+@[a-z0-9.-]+.[a-z]{2,3}$’)])]
}