The property does not exist by type. TypeScript

Question

I built a simple form that has some confirmation for it in Ionic 2. The form worked fine with ion feed, but does not work with ion triggering. I believe that the problem is not in ionic, but in my type of script. For some reason, I should not import the right thing or not define the right properties. Here is my code.

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {Validators, FormBuilder, FormGroup } from '@angular/forms'; import {Http, Request, RequestMethod } from '@angular/http'; /* Generated class for the ContactUs page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ @Component({ selector: 'page-contact', templateUrl: 'contact.html' }) export class Contact { inputGroup: FormGroup; buttonDisabled = true; fullNameError = false; emailError = false; subjectError = false; messageError = false; constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http) { this.inputGroup = this.formBuilder.group({ fullName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], email: ['', Validators.compose([Validators.required])], subject: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], message: ['', Validators.compose([Validators.maxLength(500), Validators.pattern('[a-zA-Z ]*'), Validators.required])], }); } adjustButton(){ if(this.inputGroup.controls.fullName.valid == true) { this.fullNameError = false; } if(this.inputGroup.controls.email.valid == true) { this.emailError = false; } if(this.inputGroup.controls.subject.valid == true) { this.subjectError = false; } if(this.inputGroup.controls.message.valid == true) { this.messageError = false; } } something() { console.log("Something happened"); } onClick() { // if the fullName field is not valid display error if(!this.inputGroup.controls.fullName.valid) { this.fullNameError = true; } else { this.fullNameError = false; } if(!this.inputGroup.controls.email.valid) { this.emailError = true; } else { this.emailError = false; } if(!this.inputGroup.controls.subject.valid) { this.subjectError = true; } else { this.subjectError = false; } if(!this.inputGroup.controls.message.valid) { this.messageError = true; } else { this.messageError = false; } } ionViewDidLoad() { console.log('Hello ContactUs Page'); } } 

Then here is my error log.

 01:23:43] ngc: Error: Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:40:30: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:44:30: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:48:30: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:52:30: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:63:31: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:72:31: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:78:31: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:84:31: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:788:41: Property 'fullName' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:820:41: Property 'email' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:857:41: Property 'subject' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:889:41: Property 'message' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1175:43: Property 'fullName' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1190:43: Property 'email' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1205:43: Property 'subject' does not exist on type 'Contact'. Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1220:43: Property 'message' does not exist on type 'Contact'. at check (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15) at Tsc.typeCheck (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9) at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/main.js:33:23 at process._tickCallback (internal/process/next_tick.js:103:7) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3 [01:23:43] ngc: Compilation failed [01:23:43] ngc failed: NGC encountered an error [01:23:43] Error: NGC encountered an error at ChildProcess.<anonymous> (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@ionic/app-scripts/dist/ngc.js:62:24) at emitTwo (events.js:106:13) at ChildProcess.emit (events.js:191:7) at maybeClose (internal/child_process.js:877:16) at Socket.<anonymous> (internal/child_process.js:334:11) at emitOne (events.js:96:13) at Socket.emit (events.js:188:7) at Pipe._handle.close [as _onclose] (net.js:498:12) Error running ionic app script "build": Error: NGC encountered an error 

Can someone tell me why I get these errors?

Answer 1

I managed to solve this problem without using dot notation to access map properties.

You use dotted notation in your controller (e.g. !this.inputGroup.controls.fullName.valid ). I think everything is fine, but if you use dot notation in your template (for example *ngIf="inputGroup.controls.fullName" ), you will have this problem due to differences between the compiler only time-in-time (JIT) and the compiler ahead of time (AoT). I think ionic serve uses JIT, but ionic build uses AoT.

In your template, change the settings as follows: inputGroup.controls['fullName']

This thread helped me understand the problem.

 $ ionic info Your system information: Cordova CLI: 6.3.1 Ionic Framework Version: 2.0.0-rc.0 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS Node Version: v6.6.0 

Answer 2

Perhaps try setting these attributes ( with vertices ):

 this.inputGroup = this.formBuilder.group({ 'fullName': [...], 'email': [...], 'subject': [...], 'message': [...], }); 

and in your .html:

 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <ion-item> <ion-label>FullName</ion-label> <ion-input formControlName="fullName"></ion-input> </ion-item> </form> 

edit: This is an example working in RC.1:

.ts

 export class RootRegistrazione { myForm: FormGroup; userInfo: {phone: string} = {phone: ''}; constructor(public navCtrl: NavController, public formBuilder: FormBuilder) { this.myForm = this.formBuilder.group({ 'phone': ['', this.phoneValidator.bind(this)] }); } phoneValidator(control: FormControl): {[s: string]: boolean} { if (control.value !== '') { if (!control.value.match(/^[0-9]{3}-[0-9]{7}$/)) { return {invalidPhone: true}; } } } isValid(field: string) { let formField = this.myForm.get(field); return formField.valid || formField.pristine; } onSubmit() { console.log('submitting form'); } } 

.html

 <ion-content padding class="registration"> <ion-list> <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <ion-item> <ion-label color="primary" stacked>Cellphone</ion-label> <ion-input [(ngModel)]="userInfo.phone" formControlName="phone" type="text"></ion-input> </ion-item> <p *ngIf="!isValid('phone')" color="danger" padding-left>Invalid number, expected format "012-3456789"</p> <button ion-button full color="favorite" type="submit" [disabled]="!myForm.valid">Create Account</button> </form> </ion-list> </ion-content> 

I hope I would help you now :)

Answer 3

make sure you import FormControl and assign the input values ​​"formcontrolname".

In your HTML use

 <ion-input formControlName="fullName" type="text"></ion-input> 

In your TS:

 public fullName: FormControl; constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http) { this.fullName = new FormControl("", Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])); this.inputGroup = this.formBuilder.group({ fullName: this.fullName, });