Typescript Error Property 'form' does not exist on type 'AddUserPage'

Ionic Framework ionic-v3
1

help me :frowning:
i am stucked in this problem since 5 hours ago :frowning:
there are several weird things about this problem.

  1. this err only came when first ionic serve is run…
  2. after that the problem is seem fixed after saving the “user-page.ts” without changed its page.
  3. err report shows differences report :frowning: this really make me confused.

here are the err reports,
1.localhost report


Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
// Create form builder validation rules
        this.form = fb.group({
        "username"              :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
Typescript Error
Expected 1 arguments, but got 3.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
this.form = fb.group({
"username"              :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
"address"               :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(20)], [Validators.required]) ],
Typescript Error
Expected 1 arguments, but got 3.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
"username"              :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
"address"               :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(20)], [Validators.required]) ],
"birthPlace"            :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
Typescript Error
Expected 1 arguments, but got 3.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
"address"               :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(20)], [Validators.required]) ],
"birthPlace"            :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
"birthDate"             :  ["",[Validators.required] ],
Typescript Error
Expected 1 arguments, but got 3.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
"email"                 :  ["",[Validators.required] ],
"phoneNumber"           :  ["", Validators.compose( [Validators.minLength(11)], [Validators.maxLength(12)], [Validators.required])] 
});
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
saveEntry() : void {
        let username            : string    = this.form.controls["username"].value,
        birthPlace          : string    = this.form.controls["birthPlace"].value,
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
let username            : string    = this.form.controls["username"].value,
birthPlace          : string    = this.form.controls["birthPlace"].value,
birthDate           : string    = this.form.controls["birthDate"].value,
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
birthPlace          : string    = this.form.controls["birthPlace"].value,
birthDate           : string    = this.form.controls["birthDate"].value,
address             : string    = this.form.controls["address"].value,
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
birthDate           : string    = this.form.controls["birthDate"].value,
address             : string    = this.form.controls["address"].value,
email               : string    = this.form.controls["email"].value,
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
address             : string    = this.form.controls["address"].value,
email               : string    = this.form.controls["email"].value,
phoneNumber         : string    = this.form.controls["phoneNumber"].value;
Typescript Error
Property 'form' does not exist on type 'AddUserPage'.
D:/ocPro/MRossidTechTestAlfacart/src/pages/add-user/add-user.ts
email               : string    = this.form.controls["email"].value,
phoneNumber         : string    = this.form.controls["phoneNumber"].value;
this.createEntry(username, address, birthPlace, birthDate, email, phoneNumber);
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.6
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Windows 8.1
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

  1. inspect element

    4
    4.PNG879×163 4.69 KB

  2. command prompt

    5
    5.PNG675×729 17.1 KB
    6
    6.PNG678×725 14.2 KB
    7

i believed that nothing’s wrong with my code :frowning: :frowning: :frowning:

here are my codes,
add-user.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController , ToastController} from 'ionic-angular';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { HttpClient , HttpHeaders} from '@angular/common/http';


import { ModalController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-add-user',
  templateUrl: 'add-user.html',
})
export class AddUserPage {
		
	public from                   : FormGroup;
  public username               : any;
  public address                : any;
  public birthPlace             : any;
  public birthDate              : any;
  public email                  : any;
  public phoneNumber            : any;
  private baseURI               : string  = "http://127.0.0.1/services/share/manage-data.php" ;
  constructor ( public fb : FormBuilder, public http : HttpClient, public navCtrl : NavController, public viewCtrl : ViewController, public toastCtrl : ToastController, public modalCtrl : ModalController, public loading : LoadingController){ 
  // Create form builder validation rules
          this.form = fb.group({
          "username"              :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
          "address"               :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(20)], [Validators.required]) ],
          "birthPlace"            :  ["", Validators.compose( [Validators.minLength(2)], [Validators.maxLength(10)], [Validators.required]) ],
          "birthDate"             :  ["",[Validators.required] ],
          "email"                 :  ["",[Validators.required] ],
          "phoneNumber"           :  ["", Validators.compose( [Validators.minLength(11)], [Validators.maxLength(12)], [Validators.required])] 
          });
          
  }


  closeModal() {
    let loader = this.loading.create({
            content: 'Saving Information.. ',
            });
            loader.present();
            setTimeout(() => {
              loader.dismiss();
            }, 1000);

      console.log('close modal');
      this.viewCtrl.dismiss();}
  
    
  saveEntry() : void {
          let username            : string    = this.form.controls["username"].value,
          birthPlace          : string    = this.form.controls["birthPlace"].value,
          birthDate           : string    = this.form.controls["birthDate"].value,
          address             : string    = this.form.controls["address"].value,
          email               : string    = this.form.controls["email"].value,
          phoneNumber         : string    = this.form.controls["phoneNumber"].value;
          this.createEntry(username, address, birthPlace, birthDate, email, phoneNumber);
          this.closeModal();}

  createEntry(username : string, address : string, birthPlace : string, birthDate : any, email : string, phoneNumber : string) : void {
      let headers   : any   = new HttpHeaders({ 'Content-Type': 'application/json' }),
          options   : any   = { "key" : "create", "username" : username, "address" : address, "birthPlace" : birthPlace, "birthDate" : birthDate, "email" : email, "phoneNumber" : phoneNumber },
          url       : any       = this.baseURI ;

      this.http.post(url, JSON.stringify(options), headers)
      .subscribe((data : any) =>
      {
         // If the request was successful notify the user
         
         this.sendNotification(`Congratulations the technology: ${username} was successfully added`);
         this.sendNotification(`slide down to reload the page..`);
      },
      (error : any) =>
      {
         this.sendNotification('Something went wrong!');
      });}
   

  sendNotification(message : string)  : void {
      let notification = this.toastCtrl.create({
          message       : message,
          duration      : 3000
      });
      notification.present();}

  
}

here is the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddUserPage } from '../pages/add-user/add-user';
import { ViewUserPage } from '../pages/view-user/view-user';

import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AddUserPage,
    ViewUserPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AddUserPage,
    ViewUserPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}

  ]
})
export class AppModule {}

thanks,

2

The first issue is you’ve misspelled form here:
public from : FormGroup;

Second, I think you’d use Validators.compose like this:

"username"              :  ["", Validators.compose( [Validators.minLength(2), Validators.maxLength(10), Validators.required]) ],

I.e. you pass an array of validators, rather than a bunch of arrays.