RC3: FormBuilder.group() and new FormGroup({ .. : new FormControl(..)}) both report runtime error


#1

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$

#2

can you try setting up the form in ngOninit hook? ionViewLoaded is called after view is set up


#3

same problem persist with ngOninit(), I also tried ionViewWillEnter() resulting the same problem;

I turn the alternative version of new FormGroup(…) ( see below) still did not achieve any progress…

 public sForm: FormGroup;
  private _res;
  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, private gabriel: Gabriel) {}

  ionViewWillEnter(){
    this.sForm = new FormGroup({
      familyName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
      givenName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
      // Supports alphabets and numbers no special characters except underscore('_') and dash('-') min 3 and max 20 characters. 
      userName: new FormControl('', [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: new FormControl('', [Validators.required,Validators.pattern('^[A-Za-z0-9!@#$%^&*()_-]{6,20}$')]),
      email: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$')])
    })
  }

#4

Put the FormGroup stuff into the constructor.


#5

Alternate solution would be to put the form inside <div*ngIf=“sForm”>`


#6

I changed to div*ngIf=“sForm”, and still did not have any luck; though with a different prompt( see below)

seems that formGroup is the choice expected; I also tried putting the “new FormGroup” stuff into constructor, and there were still other run time problems I had not captured

serve  /favicon.ico
3     696214   error    Uncaught Error: Error in ./SigninPage class SigninPage - inline template:20:33 caused by: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:

      
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });, http://localhost:8100/build/main.js, Line: 33093

#7

can you share the view?


#8

“this.sForm = new FormGroup…” in constructor

ts file

export class SigninPage {
  public sForm: FormGroup;
  private _res;
  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, private gabriel: Gabriel) {
      this.sForm = new FormGroup({
        familyName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        givenName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        // Supports alphabets and numbers no special characters except underscore('_') and dash('-') min 3 and max 20 characters. 
        userName: new FormControl('', [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: new FormControl('', [Validators.required,Validators.pattern('^[A-Za-z0-9!@#$%^&*()_-]{6,20}$')]),
        email: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$')])
    })
  }
  ionViewWillEnter(){
   
  }

  public signin(){
    this.gabriel.create(this.sForm).subscribe(
      (res) => {
        this. _res = res;
        debugger;
      },
      error => {
          console.log('somthing went wrong ');
        },
      () => {}
    );
  }
}

html file

<ion-content padding>
  <ion-card>
    <ion-card-header>
      <ion-item>
        
      </ion-item>
    </ion-card-header>
    <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>
  </ion-card>
</ion-content>

command line 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

[14:04:30]  ionic-app-scripts 0.0.46 
[14:04:30]  watch started ... 
[14:04:30]  build dev started ... 
[14:04:30]  clean started ... 
[14:04:30]  clean finished in 7 ms 
[14:04:30]  copy started ... 
[14:04:30]  transpile started ... 
[14:04:35]  transpile finished in 5.58 s 
[14:04:35]  webpack started ... 
[14:04:40]  copy: Error copying "/home/wjz/ion/vajra/node_modules/ionicons/dist/fonts" to 
            "/home/wjz/ion/vajra/www/assets/fonts" 
[14:04:40]  copy finished in 10.68 s 
[14:04:56]  webpack finished in 20.33 s 
[14:04:56]  sass started ... 
[14:04:58]  sass finished in 1.82 s 
[14:04:58]  build dev finished in 27.95 s 
[14:04:59]  watch ready in 29.28 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=ios  (www/index.html)
serve  /?ionicplatform=android  (www/index.html)
serve  /?ionicplatform=windows  (www/index.html)
serve  /build/main.js
serve  /build/main.css
serve  /build/polyfills.js
serve  /cordova.js  (mocked)
0     143208   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0     145402   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
0     148145   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
1     148164   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     148165   warn     Native: tried accessing the Device plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
serve  /assets/fonts/ionicons.woff2?v=3.0.0-alpha.3
1     148193   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     148194   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     148622   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     148624   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     161263   error    EXCEPTION: Error in ./SigninPage class SigninPage - inline template:38:41 caused by: Cannot read property 'valid' of undefined
4     161264   error    ORIGINAL EXCEPTION: Cannot read property 'valid' of undefined
5     161264   error    ORIGINAL STACKTRACE:
6     161266   error    TypeError: Cannot read property 'valid' of undefined
    at DebugAppView._View_SigninPage0.detectChangesInternal (/AppModule/SigninPage/component.ngfactory.js:1065:38)
    at DebugAppView.AppView.detectChanges (http://localhost:8100/build/main.js:96845:14)
    at DebugAppView.detectChanges (http://localhost:8100/build/main.js:96950:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8100/build/main.js:96871:19)
    at DebugAppView._View_SigninPage_Host0.detectChangesInternal (/AppModule/SigninPage/host.ngfactory.js:32:8)
    at DebugAppView.AppView.detectChanges (http://localhost:8100/build/main.js:96845:14)
    at DebugAppView.detectChanges (http://localhost:8100/build/main.js:96950:44)
    at ViewRef_.detectChanges (http://localhost:8100/build/main.js:55961:20)
    at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:32036:40)
    at NavControllerBase._transition (http://localhost:8100/build/main.js:32107:18)
7     161267   error    ERROR CONTEXT:

#9

todo is not set in your ts class. I think you mean sForm here


#10

I changed to iv *ngIf=“sForm”; changed “todo” to “sFrom”; moved “this.sForm = new FormGroup” back into ionViewWillEnter()

ts file

export class SigninPage {
  public sForm: FormGroup;
  private _res;
  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, private gabriel: Gabriel) {}
  
  ionViewWillEnter(){
   this.sForm = new FormGroup({
        familyName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        givenName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        // Supports alphabets and numbers no special characters except underscore('_') and dash('-') min 3 and max 20 characters. 
        userName: new FormControl('', [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: new FormControl('', [Validators.required,Validators.pattern('^[A-Za-z0-9!@#$%^&*()_-]{6,20}$')]),
        email: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$')])
    })
  }

  public signin(){
    this.gabriel.create(this.sForm).subscribe(
      (res) => {
        this. _res = res;
        debugger;
      },
      error => {
          console.log('somthing went wrong ');
        },
      () => {}
    );
  }
}

html file

<ion-content padding>
  <ion-card>
    <ion-card-header>
      <ion-item>
        
      </ion-item>
    </ion-card-header>
    <ion-card-content>
      <div *ngIf="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]="!sForm.valid">Submit</button>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

command line 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

[14:28:10]  ionic-app-scripts 0.0.46 
[14:28:10]  watch started ... 
[14:28:10]  build dev started ... 
[14:28:10]  clean started ... 
[14:28:10]  clean finished in 9 ms 
[14:28:10]  copy started ... 
[14:28:10]  transpile started ... 
[14:28:14]  transpile finished in 4.54 s 
[14:28:14]  webpack started ... 
[14:28:15]  copy: Error copying "/home/wjz/ion/vajra/node_modules/ionic-angular/fonts" to 
            "/home/wjz/ion/vajra/www/assets/fonts" 
[14:28:15]  copy finished in 4.83 s 
[14:28:30]  webpack finished in 15.58 s 
[14:28:30]  sass started ... 
[14:28:32]  sass finished in 2.03 s 
[14:28:32]  build dev finished in 22.25 s 
[14:28:33]  watch ready in 22.61 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=ios  (www/index.html)
serve  /?ionicplatform=windows  (www/index.html)
serve  /?ionicplatform=android  (www/index.html)
serve  /build/main.css
serve  /cordova.js  (mocked)
serve  /build/polyfills.js
serve  /build/main.js
0     526139   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0     528406   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
0     531042   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
1     531515   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     531516   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     531545   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     531547   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     531815   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     531817   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     539894   error    Uncaught Error: Error in ./SigninPage class SigninPage - inline template:20:33 caused by: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:

      
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });, http://localhost:8100/build/main.js, Line: 33093

#11
    <div *ngIf="sForm">   
<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>
</div>

I meant something like this…


#12

well, the magics works.

thanks very much for your time and patient, especially in a weekend :slight_smile:

happy weekend

below are the code and prompts

html

   <ion-card-content>
    <div *ngIf="sForm">  
      <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]="!sForm.valid">Submit</button>
      </form>
    </div>
    </ion-card-content>

ts file

export class SigninPage {
  public sForm: FormGroup;
  private _res;
  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, private gabriel: Gabriel) {}
  
  ionViewWillEnter(){
   this.sForm = new FormGroup({
        familyName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        givenName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
        // Supports alphabets and numbers no special characters except underscore('_') and dash('-') min 3 and max 20 characters. 
        userName: new FormControl('', [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: new FormControl('', [Validators.required,Validators.pattern('^[A-Za-z0-9!@#$%^&*()_-]{6,20}$')]),
        email: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$')])
    })
  }

  public signin(){
    this.gabriel.create(this.sForm).subscribe(
      (res) => {
        this. _res = res;
        debugger;
      },
      error => {
          console.log('somthing went wrong ');
        },
      () => {}
    );
  }
}

command line 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

[14:41:56]  ionic-app-scripts 0.0.46 
[14:41:56]  watch started ... 
[14:41:56]  build dev started ... 
[14:41:56]  clean started ... 
[14:41:56]  clean finished in 7 ms 
[14:41:56]  copy started ... 
[14:41:56]  transpile started ... 
[14:42:03]  transpile finished in 6.38 s 
[14:42:03]  webpack started ... 
[14:42:05]  copy: Error copying "/home/wjz/ion/vajra/node_modules/ionic-angular/fonts" to 
            "/home/wjz/ion/vajra/www/assets/fonts" 
[14:42:05]  copy finished in 8.49 s 
[14:42:20]  webpack finished in 17.25 s 
[14:42:20]  sass started ... 
[14:42:22]  sass finished in 2.03 s 
[14:42:22]  build dev finished in 25.73 s 
[14:42:22]  watch ready in 26.05 s 
The port 8100 was taken on the host localhost - using port 8101 instead
The port 35729 was taken on the host localhost - using port 35730 instead
Running live reload server: http://localhost:35730
Watching: www/**/*, !www/lib/**/*, !www/**/*.map
√ Running dev server:  http://localhost:8101
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=ios  (www/index.html)
serve  /?ionicplatform=android  (www/index.html)
serve  /?ionicplatform=windows  (www/index.html)
serve  /build/main.css
serve  /cordova.js  (mocked)
serve  /build/polyfills.js
serve  /build/main.js
0     356515   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0     358791   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0     361085   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     362876   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     362878   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     362904   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     362906   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     363225   warn     Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2     363227   warn     Native: tried accessing the Device plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
serve  /favicon.ico

#13

Sure no problem :slight_smile: . glad to help