Typescript error The property does not exist by type

Question

I am new to angularjs 2 and ionic 2. I work with angularjs form with Validators, FormControl and FormGroup. Everything is fine when I execute a project using the --lab ion service. but when I create this project, it gives an error: the "username" property does not exist in the type.

login.ts

import { Component } from '@angular/core'; import { LoadingController, NavController } from 'ionic-angular'; import { AuthService } from '../../service/authService'; import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'page-login', templateUrl: 'login.html' }) export class LoginPage { user: any; submitAttempt: boolean = false; slideTwoForm : FormGroup; constructor(public navCtrl: NavController, public authService: AuthService, public loadingCtrl: LoadingController, private formBuilder: FormBuilder) { this.slideTwoForm = formBuilder.group({ username: ['', Validators.compose([Validators.minLength(5), Validators.required])], description: ['', Validators.required], age: [''] }); } logForm() { if (!this.slideTwoForm.valid) { this.submitAttempt = true; } } } 

login.html

 <ion-content padding> <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate> <ion-item> <ion-label floating>Username</ion-label> <ion-input #username formControlName="username" type="text"></ion-input> </ion-item> <ion-item *ngIf="!slideTwoForm.controls.username.valid && submitAttempt"> <p>Please enter a valid name.</p> </ion-item> <ion-item> <ion-label>Description</ion-label> <ion-textarea formControlName="description"></ion-textarea> </ion-item> <ion-item> <ion-label floating>Age</ion-label> <ion-input formControlName="age" type="number"></ion-input> </ion-item> <ion-item *ngIf="!slideTwoForm.controls.age.valid && submitAttempt"> <p>Please enter a valid age.</p> </ion-item> <button ion-button type="submit">Submit</button> </form> </ion-content> 

Everything is fine until I ran the android ion build command to generate the apk file.
Can someone please tell me why I get these errors?

I also refer to this link: Property does not exist by type. TypeScript , but that can't help me:

Answer 1

Ionic2 uses compilation on time when creating for android. AoT requires:

A) for public

B) which are mentioned in html for declaration in component.

So, to fix your problem, declare public username: string; in the component and also declare other names that you get in your form.

Or ... in html you can write formControlName = 'user.username' and use the property already declared.

Remember to declare the elementref element in the component, and

Answer 2

 <ion-content padding> <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate> <ion-item> <ion-label floating>Username</ion-label> <ion-input #username formControlName="username" type="text"></ion-input> </ion-item> <ion-item *ngIf="!slideTwoForm.controls["username"].valid && submitAttempt"> <p>Please enter a valid name.</p> </ion-item> <ion-item> <ion-label>Description</ion-label> <ion-textarea formControlName="description"></ion-textarea> </ion-item> <ion-item> <ion-label floating>Age</ion-label> <ion-input formControlName="age" type="number"></ion-input> </ion-item> <ion-item *ngIf="!slideTwoForm.controls["age"].valid && submitAttempt"> <p>Please enter a valid age.</p> </ion-item> <button ion-button type="submit">Submit</button> </form> </ion-content>