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

@mrossid wrote:

help me
i am stucked in this problem since 5 hours ago
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 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

2. inspect element
   

   4.PNG879x163 4.69 KB

3. command prompt
   

   5.PNG675x729 17.1 KB
   6.PNG678x725 14.2 KB

i believed that nothing’s wrong with my code

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,

Posts: 1

Participants: 1

Read full topic