hello,
I have run into this problem while using formGroup to set up a signup page
see my ts code below
public sForm;
private _res;
constructor(public navCtrl: NavController, private formBuilder: FormBuilder, private gabriel: Gabriel) {}
ionViewLoaded(){
this.sForm = this.formBuilder.group({
familyName: ['', Validators.compose([Validators.required, Validators.maxLength(20)])],
givenName: ['', Validators.compose([Validators.required, Validators.maxLength(20)])],
// Supports alphabets and numbers no special characters except underscore('_') and dash('-') min 3 and max 20 characters.
userName: ['', Validators.compose([Validators.required, Validators.pattern('^[A-Za-z0-9_-]{3,20}$')])],
//Password supports special characters and underscore('_') and dash('-') here min length 6 max 20 charters.
password: ['', Validators.compose([Validators.required,Validators.pattern('^[A-Za-z0-9!@#$%^&*()_-]{6,20}$')])],
email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$')])]
})
}
my html part
<ion-card-content>
<form [formGroup]="sForm" (ngSubmit)="signin()">
<ion-item>
<ion-label>FamilyName</ion-label>
<ion-input type="text" formControlName="familyName"></ion-input>
</ion-item>
<ion-item>
<ion-label>GivenName</ion-label>
<ion-input type="text" formControlName="givenName"></ion-input>
</ion-item>
<ion-item>
<ion-label>UserName</ion-label>
<ion-input type="text" formControlName="userName"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
</form>
</ion-card-content>
then I typed in " ionic serve -l -s -c " at command line
I got the following prompt
wjz@bj:~/ion/vajra$ ionic serve -l -s -c
Running 'serve:before' npm script before serve
> vajra@ watch /home/wjz/ion/vajra
> ionic-app-scripts watch
[21:16:19] ionic-app-scripts 0.0.46
[21:16:19] watch started ...
[21:16:19] build dev started ...
[21:16:19] clean started ...
[21:16:19] clean finished in 153 ms
[21:16:19] copy started ...
[21:16:19] transpile started ...
[21:16:28] transpile finished in 8.26 s
[21:16:28] webpack started ...
[21:16:29] copy: Error copying "/home/wjz/ion/vajra/node_modules/ionic-angular/fonts" to
"/home/wjz/ion/vajra/www/assets/fonts"
[21:16:29] copy finished in 9.86 s
[21:16:41] webpack finished in 13.63 s
[21:16:41] sass started ...
[21:16:45] sass finished in 3.39 s
[21:16:45] build dev finished in 25.66 s
[21:16:46] watch ready in 26.56 s
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*, !www/**/*.map
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
ionic $ serve /?ionicplatform=android (www/index.html)
serve /?ionicplatform=ios (www/index.html)
serve /?ionicplatform=windows (www/index.html)
serve /build/polyfills.js
serve /build/main.css
serve /cordova.js (mocked)
serve /build/main.js
0 649162 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0 651316 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0 653450 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
serve /assets/fonts/ionicons.woff2?v=3.0.0-alpha.3
serve /assets/fonts/ionicons.woff2?v=3.0.0-alpha.3
serve /assets/fonts/ionicons.woff2?v=3.0.0-alpha.3
1 653826 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2 653828 warn Native: tried accessing the Device plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
1 653863 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2 653864 warn Native: tried accessing the Device plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
1 654043 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2 654044 warn Native: tried accessing the Device plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
3 661746 error EXCEPTION: Error in ./SigninPage class SigninPage - inline template:17:12 caused by: formGroup expects a FormGroup instance. Please pass one in.
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
4 661747 error ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
5 661748 error ORIGINAL STACKTRACE:
6 661748 error Error: formGroup expects a FormGroup instance. Please pass one in.
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.ReactiveErrors.missingFormException (/home/wjz/ion/vajra/node_modules/@angular/forms/src/directives/reactive_errors.js:21:15)
at FormGroupDirective._checkFormPresent (/home/wjz/ion/vajra/node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.js:174:86)
at FormGroupDirective.ngOnChanges (/home/wjz/ion/vajra/node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.js:80:14)
at Wrapper_FormGroupDirective.detectChangesInternal (/ReactiveFormsModule/FormGroupDirective/wrapper.ngfactory.js:24:18)
at DebugAppView._View_SigninPage0.detectChangesInternal (/AppModule/SigninPage/component.ngfactory.js:662:33)
at DebugAppView.AppView.detectChanges (/home/wjz/ion/vajra/node_modules/@angular/core/src/linker/view.js:243:14)
at DebugAppView.detectChanges (/home/wjz/ion/vajra/node_modules/@angular/core/src/linker/view.js:348:44)
at DebugAppView.AppView.detectViewChildrenChanges (/home/wjz/ion/vajra/node_modules/@angular/core/src/linker/view.js:269:19)
at DebugAppView._View_SigninPage_Host0.detectChangesInternal (/AppModule/SigninPage/host.ngfactory.js:32:8)
at DebugAppView.AppView.detectChanges (/home/wjz/ion/vajra/node_modules/@angular/core/src/linker/view.js:243:14)
7 661749 error ERROR CONTEXT:
q
my " ionic info"
wjz@bj:~/ion/vajra$ ionic info
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v4.6.2
Xcode version: Not installed
wjz@bj:~/ion/vajra$