Form is not working after upgrade to Beta 11

Ionic Framework ionic-v3
#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
#2

Change ngFormModel to formGroup and ngControl to formControl

2 Likes
#3

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)
#4

I fixed my issue by replacing ngFormModel to formGroup and ngControl to formControlName.

3 Likes
#6

[disabled]="!authForm.valid" should still work fine. Could you please post your form setup here?

#8

Thanks Joshmorony. I had the same issue and your recommendation solve it!

#9

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.

Custom Form Email Validation issue in beta 11
#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}$’)])]
}

#11

Lose the directives.